HTML · Quick Reference

Lesson 28 — iFrame Embeds Cheat Sheet

HTML

In one line: The minimum viable iframe needs src (the URL), width/height for layout reservation, and a title attribute for accessibility. Without title, screen readers announce "iframe" with...

Key Ideas

1Basic iframe Usage. The minimum viable iframe needs src (the URL), width/height for layout reservation, and a title attribute for accessibility. Without title, screen readers announce "if...

2sandbox — Security Restrictions. The sandbox attribute restricts an embedded document's capabilities. With sandbox alone (no value), everything is disabled. You then opt back in specific permissions b...

Code Examples

<!-- YouTube embed — copy the src from YouTube's Share → Embed -->
<div class="iframe-wrap">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="CSS Grid explained in 10 minutes"
    width="560"
    height="315"
    f...

<!-- Maximum restriction (user-submitted content) -->
<iframe src="user-preview.html"
        sandbox
        title="User content preview">
</iframe>

<!-- Allow scripts + same-origin access -->
<iframe src="demo.html"
   ...

<!-- From Google Maps → Share → Embed a map -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  title="Our office location in London"
  width="600"
  height="450"
  style="border:0"
  allowfullscreen
  loading="lazy"
  referrerp...