HTML Iframe

An <iframe> embeds another web page inside your page. It’s how you embed a YouTube video, a Google Map, or a payment widget from an external service.

<iframe src="https://example.com/embed" width="600" height="400"></iframe>

Accessible title

Every <iframe> needs a title attribute. Screen readers announce it before entering the embedded content, without it, users just hear “iframe” with no idea what it contains.

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Product demo video"
  width="560"
  height="315"
></iframe>

Lazy loading

Add loading="lazy" so off-screen iframes (like a map far down the page) don’t load until the visitor scrolls near them:

<iframe
  src="https://example.com/map"
  title="Store location map"
  loading="lazy"
  width="600"
  height="400"
></iframe>

Security: sandboxing

Embedded content runs with a fair amount of access by default. If you’re embedding something you don’t fully trust, use sandbox to restrict what it can do:

<iframe
  src="https://example.com/widget"
  title="Third-party widget"
  sandbox="allow-scripts allow-same-origin"
></iframe>

With no allow-* values, sandbox="" blocks scripts, forms, popups, and more, essentially treating the embedded content as static and untrusted. Add back only the specific permissions the embed actually needs.

Sizing responsively

A fixed width/height iframe won’t shrink cleanly on small screens. A common pattern keeps the aspect ratio while letting the width scale:

.video-wrapper {
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product demo video"></iframe>
</div>

Common mistakes

Missing title, leaving screen reader users with no idea what the embed contains.
Embedding third-party content with no sandbox restrictions when you don’t control that content.
Fixed pixel dimensions with no responsive wrapper, causing overflow on small screens.

FAQ

Is <iframe> bad for SEO?

Content inside an iframe generally isn’t indexed as part of your page. If the content matters for search, host it directly rather than embedding it.

Should I use <iframe> or <embed>/<object>?

<iframe> is the standard choice for embedding another HTML document, which covers almost every real use case (video embeds, maps, widgets). <embed> and <object> are mostly legacy, used for embedding plugin content like old Flash or PDF viewers, and are rarely needed today.