The <iframe> tag renders another HTML page or resource into a page.
It's commonly used to embed an HTML page or a PDF document.
This <iframe> example embeds a Wikipedia page.
Rendering is slightly delayed because the page is loaded from a remote server.
<iframe src="https://en.wikipedia.org"
style="width:100%;height:350px;"></iframe>
iframe = inline frame
The <iframe> tag embeds another HTML page in the current web page.
By default, <iframe> displays a rectangular region with its content.
Framed pages cannot be manipulated with JavaScript when the page comes from a different domain. The opposite is also true, i.e. the framed page cannot control the outer parent page.
Another commonly embedded resource includes PDF documents.
An <iframe> with a styled frame and a greater height.
<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
style="width:100%;height:600px;border:4px solid lightblue;"></iframe>
This table lists the <iframe> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| height | value | Frame height in pixels |
| width | value | Frame width in pixels |
| src | URL | URL or path of the page to be embedded |
| id | identifier | Defines a unique identifier for the iframe. |
| class | classnames | Sets one or more CSS classes to be applied to the iframe. |
| style | CSS-styles | Sets the style for the iframe. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the iframe is hidden. |
| title | text | Sets a title that is used by screen-readers and displays as a tooltip. |
| tabindex | index | Sets a tab sequence relative to the other elements. |
| srcdoc | HTML-code |
HTML content of the page to be shown inside the frame. Use either src or srcdoc, but not both. |
| name | text | Frame name |
| sandbox |
allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation no value |
A space separated set of frame restrictions. If sandbox has no value all restrictions apply. |
For additional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on the iframe tag in HTML5.
| Attribute | Description | Alternative |
|---|---|---|
align |
Aligns the content of the iframe. | CSS text-align |
frameborder |
Draws a border around the iframe. | CSS border |
longdesc |
URL of a detailed description of the iframe content. | n/a |
marginheight |
Space between iframe content and top and bottom borders. | CSS margin |
marginwidth |
Space between iframe content and left and right borders. | CSS margin |
scrolling |
Specifies when scrollbar should appear on iframe. | CSS overflow | >
The <iframe> element can display PDF documents without third-party libraries.
The PDF document is fully interactive with features like download, paginate, print, zoom, and others.
An <iframe> with an embedded PDF file.
<iframe src="/media/contract.pdf" type="application/pdf"
style="width:100%;height:500px;"></iframe>
The <iframe> tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
Here is a list of media tags.
| Element | Description |
|---|---|
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <video> | Creates a video player on a page |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <embed> | Creates a container for an external resource |
| <iframe> | Creates a frame in which another web page can be embedded |
| <svg> | Displays an scalable vector image |
| <canvas> | Creates a graphics container where JavaScript can draw |
| <img> | Displays an image |
| <area> | Specifies a map area for an image |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <figure> | Displays self-contained content, usually an image |
| <figcaption> | Adds a caption to a <figure> (image) element |
Here is when <iframe> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
