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.

Next: HTML Meta Tags

Tweet
	Jakob Jenkov