Free HTML tutorial

HTML Iframes

An iframe embeds another browsing context inside a page. Use it only when embedding external content is appropriate, and give it a meaningful title.

Embed a page

<iframe
  src="https://example.com/"
  title="Example website"
  width="600"
  height="400"
  loading="lazy">
</iframe>

Use iframes thoughtfully

The title describes the embedded content to people using assistive technology. Lazy loading can defer off-screen embeds. Some sites prevent embedding, and third-party content may have privacy or security implications.

For interactive embeds you control, consider whether a sandbox policy can limit the iframe's capabilities. Add only the permissions the embedded content needs.

Make an iframe fit its container

Set a useful starting size in the markup, then let CSS adapt the embed to narrower screens. For a wide video or player, use an aspect ratio:

.embed-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

<iframe class="embed-frame"
  src="https://player.example.com/video"
  title="Demonstration video about HTML"
  loading="lazy">
</iframe>

Use a title that tells the user what the frame contains, such as the name of the video or document. The W3C explains this approach in its iframe title technique.

Limit what embedded content can do

The sandbox attribute applies extra restrictions to an iframe. Starting with an empty value grants no additional permissions:

<iframe src="https://embed.example.com/"
  title="Embedded example"
  sandbox
  loading="lazy">
</iframe>

Sandboxing may prevent features the embed needs, so add only the specific permissions required, such as allow-forms or allow-scripts. Avoid combining allow-scripts and allow-same-origin when the embedded page is from the same origin as its parent; the HTML Standard warns that this combination can let the embedded page escape the sandbox.

A page can be displayed in a cross-origin iframe without giving the parent page general access to read or change that page’s document. Only communicate across origins through deliberate mechanisms such as postMessage, with origin checks in the receiving code.

See the HTML Standard’s iframe guidance for sandbox behavior and available permissions.

HTML iframe questions

Why does an iframe show a blank page?

The embedded site may refuse to be framed, the URL may not be an embeddable page, or the sandbox may block a feature it needs. Use the embed URL and settings supported by the content provider.

Does `loading="lazy"` make an iframe private?

No. Lazy loading can defer loading an off-screen iframe. It does not replace consent, privacy controls, or careful selection of the embedded service.