HTML Iframes

An iframe embeds another document in a nested browsing context. It needs a useful title, explicit size, and restrictions when you do not control the framed page.

An iframe embeds another HTML document in a nested browsing context. Maps, third-party players, and some widgets use this pattern. It is not a substitute for a local video or audio file you host yourself, and it is not a CSS layout tool.

Give every iframe a name, size, and source

title describes the embedded document for assistive technology. width and height reserve layout space. loading=lazy defers off-screen frames. src must point to a URL you intend to load; an empty or unknown source is not a placeholder design.

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

• Write a title that names the embedded content.
• Set explicit dimensions to reduce layout shift.
• Lazy-load frames that start off-screen.
• Prefer native video when you host the file.
• Do not use iframes to position unrelated page columns.

Third-party frames have a cost

A framed map or player can make network requests, store data, and run scripts you do not control. Tell people when content comes from another service. Avoid autoplaying framed media with sound. If you only need a static map image and a link, that can be a calmer alternative.