HTML IFrames

An iframe element embeds another web page in the current page. Iframes can include pages that are internal (same domain) or external (different domain).

HTML Tutorial

Example

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 more information about <iframe>, see our HTML iframe Tag Reference.


Iframe Syntax

The iframe syntax:

<iframe src="URL"></iframe>

The src attribute references the URL of the page or site to display inside the frame.

Width and height

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>

Remove iframe border

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>

Using iframe as target

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>

You may also like

Guides