Posts

HTML <iframe> Tag

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

AttributeValueDescription
Alignleft, right, top, middle, bottomNote this is no longer supported in HTML5.
Specifies hoe the alignment of an <iframe> will be plcaed on the page.
frameborder10Note this is not supported in HTML5. This specifies whether or not to display a border around the
<iframe>
heightnumber pixelsSpecifies the physical height of an <iframe>
longdescURLNote this is not supported in HTML5. Specifies that the page contains a long description of the
content of an <iframe>
marginheightpixelsNote this is not supported in HTML5. Specifies the top and bottom margins for the content of an <iframe>
marginwidthnumber pixelsNote this is not supported in HTML5. Specifies the left and right margins to be used around the <iframe>
namenameSpecifies the name of the <iframe>
sandbox“”, allow-forms, allow-same-origin, allow-scripts, allow-top-navigationAllows you to set extra restrictions for the content in the <iframe>
scrollingyes, no, autoNote this is not supported in HTML5. Specifies whether to display scrollbars in an <iframe>
seamlessseamlessSpecifies that the <iframe> should merge in with the containing document. You do this using <iframe seamless>. This is only supported by Chrome and Safari.
srcURLSpecifies the URL of the document to embed in the <iframe>
srcdocHTML_codeSpecifies the HTML content of the page to show in the <iframe>
widthnumber of pixelsSpecifies the width of the <iframe>