Iframes & Embeds

<iframe> embeds another HTML document inside this one. YouTube videos, Google Maps, payment forms, demos — anything that lives at a URL can be embedded.

The Basic Form

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

• src — the URL to embed
• width / height — like an image
• title — required for accessibility — short description
• allowfullscreen — let the iframe go fullscreen

sandbox — Security

If you embed untrusted content, lock it down:

<iframe src="/demo.html" sandbox="allow-scripts"></iframe>

sandbox with no value blocks everything. Add specific permissions back:

• allow-scripts — let the iframe run JS
• allow-forms — let it submit forms
• allow-same-origin — treat as same origin (for cookies, storage)
• allow-popups — let it open windows

Use the least privileges that work.

Lazy Loading

<iframe src="/big-embed" loading="lazy"></iframe>

Like <img>, iframes can lazy-load. Big win for pages with several embeds below the fold.

When NOT to Embed

• A “card” with content from another page — fetch and render the content yourself instead
• Anything you can express with native HTML — embedding is heavy

Common Embeds

Communicating With Iframes

Cross-origin iframes can’t directly access the parent’s DOM. To exchange data, use window.postMessage(). (Detailed JS topic; covered in the JavaScript track.)

Up Next

The semantic structural elements — <nav>, <main>, <article>, <section>, <aside>, <header>, <footer>.