An iframe is used to embed another document into a website, this can be a youtube vide, 360 virtual tour or even another webpage.
The iframe is used in Internet Explorer, Mozilla, Opera, Chrome and Safari which means it can be used safely on your website.
The use of iframes can be done in many ways and there is no real right or wrong way to do this as the best way depends on the final output required. Also for example if you use WordPress you use plugins to enalbe short codes.
In HTML5 we have new attributes that we can use such as sandbox, seamless and srdoc which we will show you how to use later.
Basic iframe coding:-
<iframe src=”http://www.chameleonwebservices.co.uk”></iframe>
iFrame Attributes
| Attribute | Value | Description |
|---|
| Align | left, right, top, middle, bottom | Note this is no longer supported in HTML5.
Specifies hoe the alignment of an <iframe> will be plcaed on the page. |
| frameborder | 10 | Note this is not supported in HTML5. This specifies whether or not to display a border around the
<iframe> |
| height | number pixels | Specifies the physical height of an <iframe> |
| longdesc | URL | Note this is not supported in HTML5. Specifies that the page contains a long description of the
content of an <iframe> |
| marginheight | pixels | Note this is not supported in HTML5. Specifies the top and bottom margins for the content of an <iframe> |
| marginwidth | number pixels | Note this is not supported in HTML5. Specifies the left and right margins to be used around the <iframe> |
| name | name | Specifies the name of the <iframe> |
| sandbox | “”, allow-forms, allow-same-origin, allow-scripts, allow-top-navigation | Allows you to set extra restrictions for the content in the <iframe> |
| scrolling | yes, no, auto | Note this is not supported in HTML5. Specifies whether to display scrollbars in an <iframe> |
| seamless | seamless | Specifies that the <iframe> should merge in with the containing document. You do this using <iframe seamless>. This is only supported by Chrome and Safari. |
| src | URL | Specifies the URL of the document to embed in the <iframe> |
| srcdoc | HTML_code | Specifies the HTML content of the page to show in the <iframe> |
| width | number of pixels | Specifies the width of the <iframe> |
