The <iframe> element
The <iframe> tag embeds another web page inside the current one, in its own rectangular frame. It is how sites embed YouTube videos, Google Maps and payment forms. Set the page to load with src, describe it for screen readers with title, and use loading="lazy" so it only loads when scrolled into view.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, embedded content, interactive content, palpable content |
| Content model | Nothing |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts embedded content |
| DOM interface | HTMLIFrameElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| src | The URL of the page to embed |
| srcdoc | HTML to show directly instead of loading a URL |
| title | Describes the frame’s content for screen readers — always add one |
| width / height | The frame size in pixels (default 300 × 150) |
| loading | lazy waits until the frame is near the screen; eager (default) loads at once |
| allow | Features the embedded page may use, e.g. fullscreen; autoplay; clipboard-write |
| allowfullscreen | Lets the embedded page go full screen (common for videos) |
| sandbox | Applies strict restrictions; add tokens like allow-scripts to relax them one by one |
| referrerpolicy | How much of your page’s URL is sent to the embedded site |
| name | A name that links and forms can target with target="name" |
Common examples
A responsive YouTube video
Paste the embed code from YouTube’s Share → Embed, then let CSS size it to the page while keeping the 16:9 shape.
An embedded Google Map
In Google Maps choose Share → Embed a map, copy the code, and add loading="lazy" so it only loads when scrolled into view.
A sandboxed third-party widget
The sandbox attribute blocks everything by default; add back only what the widget needs.
<iframe> vs <embed> and <object>
An <iframe> embeds a whole web page — a video player, a map, a form — that runs in its own frame with its own scripts and links. <embed> and <object> embed a single file, such as a PDF or an SVG image, and are mainly used for formats the browser can display directly.
For YouTube, Vimeo, maps and other services, use the iframe embed code they provide. For a PDF on your own site, <object> with a download link inside as a fallback is the friendliest option.
| <iframe> | <embed> / <object> | |
|---|---|---|
| Embeds | A whole web page | A single file |
| Typical use | Videos, maps, widgets | PDFs, SVG files |
| Security controls | sandbox, allow | Limited |
Common mistakes to avoid
- Missing
title. Screen readers announce the title to say what’s inside the frame; without it the frame is a mystery. - Fixed widths that break on phones. A 560-pixel-wide frame overflows small screens; use
width: 100%withaspect-ratio. - Several heavy embeds loading at once. Each video or map loads lots of extra code. Lazy-load them, or show a thumbnail that loads the player on click.
- Embedding untrusted content without a sandbox. Third-party frames can run scripts; restrict them with
sandboxandallow.
Accessibility & SEO tips
- Always set a short, descriptive
titlesuch as “Map to our shop” or “Video: How to bake bread”. - Use
loading="lazy"on iframes below the first screen to keep your page fast, which also helps Core Web Vitals. - Text inside an iframe usually counts for the embedded page, not yours — keep your important content directly on your own page so it can rank.
Browser support
Supported in every browser. The loading="lazy", sandbox and allow attributes work in all current browsers.
Tutorial: How to embed a YouTube video