Iframe
iframe is short for inline frame. It refers to an HTML object which can be integrated into a fixed frame on an existing website. Banner ads or other content such as video clips are embedded using iframes. HTML5 supports this technology and offers more configuration options. The iframe HTML code is not to be confused with the video format iFrame, which was developed by Apple.
Application
Using iframes, websites can be enhanced in terms of their functionality and content without the need for programming work. Many companies offer iframes as widgets which others can embed on their websites. A popular example of the integration of iframes are embedded YouTube videos.
Coding
You can embed an inline frame on your website as HTML line in the source code similar to an image. The height, orientation, and other attributes that affect the look and the alignment of the iframe, are specified within the code snippet.
An iframe is usually inserted in the following format:
<iframe src="http://www.sampesite.com/iframe.html" name="Name of embedded iframe" width="Width that the iframe will be output as in the frontend" height="Height of the iframe" align="alignment" scrolling="is a scrolling bar supposed to be inserted?" marginheight="Height of margin" marginwidth="Width of margin" frameborder="Width of frame border"> </iframe>
All length measurements are specified in pixels. If the iframe is aligned left, all other text or page elements will be to the right of it.
Iframes and HTML5
iframes can be extended with many additional elements using HTML5. At the same time some attributes in HTML5 are no longer included in the standard.
- Enabling full-screen view of the iframe:
For this purpose, the attribute “allowfullscreen” gets included in the embedding code. For example, if a video is included through iframe, it can be fit to the full screen size. This technique is already provided by the video sharing website YouTube when users retrieve the embedding code.
In this case, only the video will be enlarged to the full-screen view during playback. The iframe retains the size specified in the code. Javascript will have to be used additionally if this size is to be transferred to the full-screen view.
- Sandboxing: iframes which are embedded with HTML5 can be provided with appropriate sandbox attributes. That way the programmer can influence whether the iframe may modify content of the website in which it is embedded. This was originally impossible because browsers are based on “same-origin policy” and thus prevent embedded elements (originating from other servers) from manipulating the contents of the website you are viewing. Bypassing this security feature can be important if the provider of the iframe needs additional form entries so that the content in the iframe can be used at all, such as an age verification. The iframe would then have to be extended to include the following attribute: <iframe sandbox=" allow-same-origin">
- Omitted attributes: iframes in HTML5 generally no longer use the style=border or scrolling attributes because frames are no longer appropriate for iframes and disturb modern layouts. Alignment with the align attribute is likewise no longer supported. The noframe tag is omitted in HTML5 as well.
Iframes and SEO
Search engines can indeed recognize iframes, but the crawlers don’t pay attention to their content and instead follow the link contained in it to its point of origin. It may also happen that some browsers and some CMSs cannot display an iframe correctly. It is therefore recommended to dispense with the excessive use of iframes to ensure better usability and accessibility. Loading of iframes can be prevented by installing a browser add-on, for example, NoScript from Firefox.