# Embedding Maps and Videos with iframe
An iframe shows a piece of another website, such as a YouTube video or a map, inside your page, and a few attributes keep it accessible, fast and safe.
Journeyman · HTML · Updated October 31, 2026
## After this lesson you can
- Embed a map or a video with an iframe that has a title and loads lazily
- Limit what an embed can do with sandbox, allow and referrerpolicy
- Choose between a video or audio element, an iframe embed and a plain link
## Key takeaways
- An `
```
- **`src`** is the address of the page to show. Each `&` in it is written `&` inside an HTML attribute.
- **`title`** says what's in the window. A screen reader announces it when it reaches the frame ("Map of The Bike Shed's workshop, frame"), and accessibility checks report a frame without one. Write what it shows, not "map" or "iframe".
- **`width`** and **`height`** are in pixels and save its space, as they do for a video.
## Copying a share code
You rarely write an iframe from nothing. Most sites that let you embed give you the code: on YouTube, **Share**, then **Embed**; on Google Maps, **Share**, then **Embed a map**; on OpenStreetMap, **Share**, then **HTML**. YouTube's code looks like this (`VIDEO_ID` stands for the video's own ID):
```html
```
It works as it is, but it's worth two changes before you paste it in:
- **Replace the title.** "YouTube video player" says nothing. Write what the video is: `title="Video: fixing a flat in ten minutes"`.
- **Remove `frameborder="0"`.** It's an old attribute that HTML no longer uses, and the validator reports it. The frame's border is a job for the stylesheet.
YouTube also has a **privacy-enhanced mode** (the box *Enable privacy-enhanced mode* under the code): the address starts `https://www.youtube-nocookie.com/embed/` instead, and YouTube stores less about your visitors until they press play.
## Load it only when it's needed
A map at the bottom of a long page doesn't need to load before anyone scrolls down to it. **`loading="lazy"`** tells the browser to wait until the visitor scrolls near the iframe. This is **lazy loading**, and it works the same way on an ``.
```html
```
Leave `loading="lazy"` off an iframe that's on the first screen, the part of the page a visitor sees before scrolling: the browser would wait for nothing, and it would appear later than it should. Google Maps' embed code already has `loading="lazy"`, but no `title`, so you add that one yourself.
**Try it.** Find your own town on openstreetmap.org, open **Share**, choose **HTML**, and copy the code into a page in your `media-practice` folder. Give it a `title` and `loading="lazy"`, put it below several paragraphs of text, and open the page with Live Server. Press **F12**, open the **Network** tab, reload, and watch the map's files arrive only when you scroll down.
## What the other site may do and learn
The page in the window belongs to someone else, so you decide what you let it do, and what you tell it about your page.
- **`allow`** lists the powerful features the embedded page may use, separated by semicolons: `fullscreen`, `picture-in-picture`, `autoplay`, and more serious ones such as `camera`, `microphone` and `geolocation` (the visitor's location). A powerful feature that isn't listed, it can't use. A video needs `fullscreen`; a map has no reason to get the camera. The older `allowfullscreen` attribute in YouTube's code does the same as `allow="fullscreen"`.
- **`referrerpolicy`** decides how much of your page's address is sent to the other site when the frame loads. Like the return address on an envelope, this **referrer** tells the other site where the request came from. `strict-origin-when-cross-origin`, which browsers use when you don't say, sends only your site's name (`https://thebikeshed.example`), not the page's full address. `no-referrer` sends nothing; some players, YouTube's among them, may refuse to play when they can't tell which site they're on, so keep the value their share code gives you.
## Locking it down with sandbox
A sandbox in a park lets children play without wandering into the street. The **`sandbox`** attribute puts the page in the frame in a sandbox. With no value, it blocks almost everything: scripts, forms, pop-up windows, downloads, sending your visitor's whole tab to another address, and reading its own site's cookies. Then you add back only what it needs, by name:
```html
```
This quiz from another site may run its scripts and its form, but it can't open pop-ups or take your visitor away from your page. Use `sandbox` for content you trust less: a widget from a small site, or code that other people paste into your site. A big player such as YouTube needs so much of it back (its scripts, its own cookies, pop-ups and full screen) that sites usually embed it without `sandbox` and limit it with `allow` instead.
## What an embed costs, and when a link is enough
An iframe loads a whole other page: its HTML, its styles, its scripts and its fonts. A single YouTube embed can download hundreds of kilobytes before anyone presses play, and the other site learns that someone visited your page and may set its own cookies. Some sites refuse to be shown in a frame at all; the box then says the site *refused to connect*.
So pick the lightest thing that does the job:
| What you have | Use |
|---|---|
| Your own video or sound file | `