iframes

An <iframe> embeds an entire other HTML document inside the current page — a map, a video player, a payment form from a third party, an embedded tweet.

Basic usage

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

Always include a title attribute — it's how screen readers announce what the embedded frame contains, since there's no other text describing it.

A common real-world example

Embedding a YouTube video:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

The allow attribute grants the embedded page permission to use specific browser features it needs (like fullscreen or autoplay), similar to how a native app requests permissions.

Security considerations

Because an iframe loads a full, independent document — potentially from a domain you don't control — browsers sandbox it by default in some ways, and you can restrict it further:

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

The sandbox attribute, when present with no value, disables everything the embedded page could otherwise do — scripts, forms, popups, top-level navigation. Adding specific allow-* keywords re-enables just what you actually need. Treat any iframe pointing to a domain you don't control as untrusted content, and only grant the permissions it genuinely requires.

Lazy-loading iframes

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

loading="lazy" tells the browser to skip loading the iframe's content until it's about to scroll into view — useful for pages with several embeds (like a page full of embedded videos) where loading all of them upfront would slow down the initial page load.