Français

<iframe>

Embed external content: YouTube video, map, widget

— 1 min read

  • HTML
  • accessibility
  • semantics
  • media

<iframe> — The embedded frame

The <iframe> element embeds an external document in your page. It is a window into another site or browsing context: a YouTube video, an interactive map, a third-party form.

When to use it

You want to embed content hosted elsewhere: a YouTube video, a Google Maps widget, a booking form. The title attribute is required: it describes the iframe content for assistive technologies.

What you gain

Accessibility: without title, screen readers announce "frame" with no context. With a descriptive title, the user knows what to expect before entering it. Add loading="lazy" to avoid slowing initial page load.

Code example

<iframe
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
  title="Product demo: how to create a board card in 30 seconds"
  width="560"
  height="315"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Further reading