Module 3: Links and Media · Lesson 7 of 8
HTML iframe: How to Embed a Page, Map or Video
All lessons in Module 3
Goal: Embed another page in an iframe, with a title and a size.
Learn
An iframe (inline frame (opens in a new tab)) is a window in your page that shows another whole page, such as a map or a booking widget.
<iframe src="hello.html" title="Welcome message" width="300" height="200"></iframe>
srcis the address of the page to show.titledescribes the frame. Screen readers announce it, so people know what is inside before they enter it.widthandheightset its size in pixels.
Unlike img from Images, an iframe needs a closing tag. Many big sites refuse to be framed, to protect their users. Embed what a site offers on purpose; video and map services hand you ready-made embed code. Only embed pages you trust, because visitors will see them as part of your site.
The short version
- An
<iframe>is a window in your page that shows another whole page. srcsets the address,titledescribes the content for screen readers, andwidthandheightset the size in pixels.- An iframe always needs a closing
</iframe>tag. - Embed only what sites explicitly offer, such as video and map embed code, and only from sources you trust.
Example
<p>Our welcome page, in a small window:</p>
<iframe src="hello.html" title="Welcome page" width="300" height="200"></iframe>Your task
Embed the small welcome page hello.html:
- Add an
<iframe>under the paragraph withsrc="hello.html", and close it with</iframe>. - Give it a
titlethat describes its content. - Make it 400 pixels wide and 250 pixels tall with
widthandheight.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<iframe src="hello.html" title="Welcome page" />
<p>More text below.</p>Right
<iframe src="hello.html" title="Welcome page"></iframe>
<p>More text below.</p>The slash does not close an iframe. The browser keeps reading until it finds </iframe>, and the paragraph vanishes.
Wrong
<iframe src="https://www.google.com/maps" title="Map"></iframe>Right
<iframe src="https://www.google.com/maps/embed?pb=..." title="Map of our cafe" width="400" height="300"></iframe>Most sites refuse to be framed through their normal pages. Use the special embed address from the Share or Embed option.
Go deeper
Every iframe loads an entire extra page, with its own scripts and styles, so a few embeds can make a fast page slow. Add loading="lazy" to iframes further down the page so they load only when the visitor scrolls near them. Current browsers support lazy loading (opens in a new tab) for both images and iframes.
You can also limit what a framed page may do. The sandbox attribute switches off scripts, forms and pop-ups inside the frame unless you allow them one by one, for example sandbox="allow-scripts". The allow attribute grants specific powers, such as allow="fullscreen".
Embeds have a privacy cost. The embedded service can see who visits your page, and it often sets cookies. YouTube offers a more private address, youtube-nocookie.com, that holds back until the visitor plays the video. For short clips you host yourself, the video element from Audio and Video avoids third parties entirely.
Search engines usually credit the content inside an iframe to the page it comes from. Embedded text won't help your own page rank, so write your own words around the frame.
Large sites often show a thumbnail image with a play button and insert the real iframe only when someone clicks it. The first page load stays light that way.
Frequently asked questions
How do I embed a YouTube video in HTML?
On YouTube, click Share, then Embed, and copy the code. It is an <iframe> whose src looks like https://www.youtube.com/embed/VIDEO_ID. Paste it into your page and give it a meaningful title, such as the video's name. Keep the allowfullscreen attribute if you want the full-screen button to work.
Why does my iframe say refused to connect?
The site you are framing has told browsers not to show it inside other pages, using a security header called X-Frame-Options or a Content Security Policy. This protects its users from fake pages and click tricks known as clickjacking (opens in a new tab). You can't override it from your side. Look for an official embed option, or link to the page instead.
How do I make an iframe responsive?
The width and height attributes are fixed pixel sizes, so on narrow screens the frame can stick out. Let CSS take over: iframe{width:100%;height:auto;aspect-ratio:16/9} makes the frame fill its container and keeps a video's proportions. Keep the attributes too, as a sensible size before the CSS loads. The iframe generator on HTML Cheat Sheet (opens in a new tab) can write the tag with all these attributes for you.