media
<iframe>
Embeds another HTML document inside the current page. Use it for third-party embeds (maps, videos, payments) — but treat every iframe as untrusted and sandbox where possible.
<iframe src="https://example.com" title="Example" loading="lazy"></iframe>Common attributes
| Attribute | Purpose |
|---|---|
| src | URL of the embedded document |
| title | Accessible name (required for a11y) |
| sandbox | Restricts what the frame can do; allow-* tokens opt back in |
| allow | Permissions policy: camera, microphone, fullscreen |
| loading | eager | lazy |
| referrerpolicy | Controls the Referer header sent to src |
| width | Frame width in pixels |
| height | Frame height in pixels |
Examples
<iframe src="https://www.youtube.com/embed/xyz" title="Demo video" allow="fullscreen" loading="lazy"></iframe>YouTube embed, lazy-loaded
<iframe src="/preview.html" title="Preview" sandbox="allow-scripts"></iframe>Sandboxed preview that can run JS but not submit forms
<iframe src="https://maps.google.com/..." title="Store location" width="600" height="400"></iframe>Embedded map
Gotcha
Always set a descriptive title — screen readers use it to announce the frame. Use sandbox (and CSP frame-ancestors) to contain untrusted embeds; heavy iframes on above-the-fold content hurt LCP.
Related tags
<video>
Embeds a video player in the page, with native browser controls and multiple source support. Use it for self-hosted or CDN-hosted video instead of Flash or heavy JS players.
<img>
Embeds a raster or vector image into the document. Use it for content images; use CSS background-image for purely decorative visuals.
<svg>
Inline vector graphics that scale losslessly and can be styled and animated with CSS or JS. Use it for icons, logos, charts, and any illustration that must stay crisp at any size.