An iframe element embeds a web page inside another web page.
Iframes can include pages that are internal (same domain) or external (different domain).
This is an <iframe> that embeds a Wikipedia page about Vincent van Gogh .
<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
style="height:450px;width:100%;">
</iframe>
Tip: Elements inside an externally linked <iframe> cannot be styled or controlled because of cross-domain policy.
For details on <iframe>, see our HTML iframe Tag Reference.
The iframe syntax:
<iframe src="URL"></iframe>
The src attribute references the URL of the page or site to display inside the frame.
Use the width and height attributes to set the iframe size.
These attributes only accept pixel width. Use CSS to set percentage iframe dimensions.
An <iframe> set to 500px height and a 100% width.
<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
height="500" style="width:100%;">
</iframe>
By default, the iframe has a border.
To remove it set the border CSS property to none -- note: scrollbars will still display.
An <iframe> without a border.
<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
style="border:none;height:450px;width:100%;">
</iframe>
The border can be customized further with CSS.
An <iframe> with a custom border.
<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
style="height:450px;width:100%;border:4px solid darkblue;">
</iframe>
An iframe can also be the target for a link.
That is, it uses the iframe to display a linked page or site.
The target attribute of the link must refer to the name of the iframe.
You can see this in action below.
Click the 'View Henri Matisse' link located under the <iframe>, and the frame page changes to Matisse.
<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
name="wikipedia"
style="width:100%;height:350px;">
</iframe>
<div>
<a href="https://www.wikipedia.org/wiki/Henri_Matisse"
target="wikipedia">View Henri Matisse
</a>
</div>
