<iframe> Inline frame
Shows another web page inside a frame on yours.
<iframe> loads a whole separate page into yours: a map, a video player, a widget. Screen readers announce it, so give it a title that says what is inside.
Set width and height, and use loading="lazy" for frames lower down the page. sandbox limits what the embedded page is allowed to do. Plenty of sites refuse to be framed, so some URLs will never load. The old frameborder and scrolling attributes are obsolete; style the frame with CSS.
sandbox, allow, loading and referrerpolicy are documented in the iframe element in the WHATWG standard (opens in a new tab). Practise in the Embedding with iframe lesson.
Syntax
<iframe src="page.html" title="Description" width="600" height="400"></iframe>When to use it
An <iframe> shows a complete web page inside yours. Maps from a mapping service, a video player from a hosting platform, your payment provider's card form, a booking calendar and live code demos all arrive this way. The framed page keeps its own styles and scripts. It can't break your page, and your page can't break it.
Of the three embedding elements, iframe is the one with fine security controls: sandbox, allow and referrerpolicy. embed and object have nothing like them, so use iframe for anything from another site. A small HTML snippet can go in srcdoc without a separate file.
Every iframe is a whole extra page, with its own requests and memory and, often, its own trackers. Put three maps and two video players on a contact page and it crawls. Embed what visitors need and no more, or show a static image of the map with a link to the full version.
Attributes
| Attribute | What it does |
|---|---|
src | URL of the page to embed. |
title | Describes the frame for screen readers. |
width | Width in pixels. |
height | Height in pixels. |
loading | lazy delays loading until it is near the screen. |
sandbox | Applies restrictions; values like allow-scripts lift them. |
allow | Permissions policy, such as fullscreen or camera. |
srcdoc | HTML to show instead of a URL. |
name | Name used as a link or form target. |
referrerpolicy | How much referrer information to send. |
Live example
Edit the code and watch the preview.
<iframe src="hello.html" title="Hello page demo" width="400" height="200"></iframe>More examples
Inline content with srcdoc
srcdoc holds the framed page's HTML right in the attribute, so there is no extra file. Single quotes inside it keep clear of the double quotes around it.
<iframe title="Mini demo" width="300" height="100" srcdoc="<p style='font:16px sans-serif'>Hello from <strong>srcdoc</strong>!</p>"></iframe>Locked-down frame
Left empty, sandbox switches on every restriction. No scripts, no forms, no pop-ups, and the frame gets a unique origin. On top of that, referrerpolicy="no-referrer" keeps your page's address from reaching the framed page.
<iframe src="hello.html" title="Sandboxed hello page" width="400" height="200" sandbox referrerpolicy="no-referrer"></iframe>Tip: Every iframe needs a title saying what it holds.
Browser support
iframe works in every browser. So do srcdoc, sandbox and loading="lazy" in all current ones, and the iframe sandbox support table (opens in a new tab) lists versions. frame and frameset are obsolete. That leaves iframe as the last frame element in HTML.
Accessibility
Screen readers announce an iframe's title when users move into the frame, so the title attribute should describe the content (WCAG 4.1.2). Why frames need names is covered in the W3C note Understanding Name, Role, Value (opens in a new tab).
Common mistakes
Wrong
<iframe src="https://www.youtube.com/embed/abc"></iframe>Right
<iframe src="https://www.youtube.com/embed/abc" title="Product demo video" loading="lazy" width="560" height="315"></iframe>Screen readers use the title as the frame's name. Lazy loading saves bandwidth.
Frequently asked questions
How do I make an iframe responsive?
Make it fill its container and hold the aspect ratio with CSS: iframe{width:100%;height:auto;aspect-ratio:16/9;border:0}. Every modern browser supports aspect-ratio, so the old padding-bottom wrapper trick is no longer needed. Leave the width and height attributes in place as a hint for older browsers. For ready-made embed code with sensible defaults, try the iframe generator on HTML Cheat Sheet (opens in a new tab).
Why does a website refuse to load in my iframe?
The site forbids it. Many sites send an X-Frame-Options header or a Content-Security-Policy frame-ancestors rule that blocks embedding, which protects their users from clickjacking. Nothing on your page can override that. If the site has an official embed URL, like the ones YouTube and Google Maps provide, use that.
Practise it
- Embedding with iframe (Module 3: Links and Media)