An iframe shows another web page inside your page. It is how YouTube videos, maps and many widgets are embedded.
index.html
HTML
<iframe
src="https://www.example.com/embed/map"
title="Map showing the location of Juniper Books"
width="600" height="400"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>Important attributes
| Attribute | Purpose |
|---|---|
src | The page to show |
title | A description for screen readers. Required for accessibility |
width, height | The size |
loading="lazy" | Load only when scrolled near |
sandbox | Restrict what the embedded page can do |
allow | Permit features such as fullscreen |
Embedding a video
Video platforms give you ready-made embed code. Check that it has a meaningful title, and add loading="lazy" if it is below the fold.
Make it responsive
style.css
CSS
iframe { max-width: 100%; }
.video-wrap { aspect-ratio: 16 / 9; }
.video-wrap iframe { width: 100%; height: 100%; }Security: only embed what you trust
An embedded page runs its own code on your page. Only embed sources you trust. sandbox is a strong way to limit what an iframe can do, and some sites forbid being embedded at all and will show an error.
warning
No title
An
iframe without a title is announced as just “frame” by screen readers. Always describe what it contains.
info
The Try it boxes on this course use a sandbox
The runnable examples in these lessons use an iframe with
sandbox="allow-scripts" and no same-origin permission, so the code you type can never touch this site.