Tech and Media Labs
This site uses cookies to improve the user experience.




HTML iframe

Jakob Jenkov
Last update: 2014-06-15

The iframe element is used to include other HTML pages in a frame inside another HTML page. Here is a simple example:

<iframe width="500" height="200" src="http://tutorials.jenkov.com/"></iframe>

The width and height attributes set the size of the iframe element in the HTML document in which it is used.

The src attribute sets the URL of the HTML page to show inside the iframe element.

Here is how it looks if the above iframe code is included in an HTML page:

Allowed iframe Content

You can show other files than HTML files inside an iframe element. In fact, all files that can be shown in a browser can be included in an iframe, for instance .gif, .jpg, .png and .svg files. An iframe can also be used to include videos from YouTube in your HTML page (to learn how, go to YouTube, find a video and get the embed code for it).

iframe Attributes

The iframe element has the following attributes:

Attribute Description
width Sets the width of the iframe in the HTML document in which it is used.
height Sets the height of the iframe in the HTML document in which it is used.
name Sets the name of the iframe. The name is used when referring to this iframe via JavaScript
sandbox Security settings for the iframe elements. Possible values are: "" allow-forms allow-same-origin allow-scripts allow-top-navigation . These values tell whether forms are allowed in the iframe, whether content from the same origin as the loaded page is allowed, whether JavaScript is allowed to run in the iframe and whether the iframe can navigate the user away from the page containing the iframe.
seamless Specifies that the iframe should look like it is part of the including page.
src Sets the URL of the HTML document to show in this iframe.
srcdoc Sets the HTML to show in this iframe. Can be used instead of the src attribute.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC