Embedding Content with iframe: YouTube, Maps and More

An iframe embeds another web page inside yours, like a YouTube video or a map. Learn the key iframe attributes, lazy loading, security with sandbox, and privacy tips.

What is an iframe?

An <iframe> (inline frame) shows a whole other web page inside your page. Think of it as a window in your wall that looks into somebody else's house. YouTube videos, Google Maps, OpenStreetMap, Spotify players and payment boxes are often embedded this way.

The basic attributes are:

• src: the address of the page to show.
• width and height: the size of the frame, in pixels.
• title: a short description of what is inside. Screen readers announce it, so it is required for accessibility.
• loading="lazy": the browser loads the frame only when the user scrolls near it. This makes your page much faster.

How to embed a YouTube video

On YouTube, click Share, then Embed, and copy the code. It will look similar to this. Replace VIDEO_ID with the real ID from the video's URL.

<iframe
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="How to make latte art at home"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

You will see a YouTube player in your page. Here is what the extra attributes do:

• allow lists which browser features the embedded page may use, like picture-in-picture.
• allowfullscreen lets the user make the video full screen.
• referrerpolicy controls what information about your page is sent to YouTube. YouTube needs to know which site the video is playing on, so keep this setting.

Tip: Notice the address uses youtube-nocookie.com instead of youtube.com. This "privacy-enhanced mode" doesn't store YouTube cookies on your visitor's device until they play the video. It is a simple change that respects your users' privacy.

How to embed a map

Map services give you embed code too. On Google Maps, open a place, click Share, then Embed a map, and copy the iframe. OpenStreetMap is a free, open alternative: on openstreetmap.org click Share and copy the HTML.

<iframe
  width="600"
  height="400"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.1298%2C51.5055%2C-0.1218%2C51.5095&amp;layer=mapnik&amp;marker=51.5075%2C-0.1258"
  title="Map showing Green Leaf Cafe near Trafalgar Square, London"
  loading="lazy">
</iframe>
<p><a href="https://www.openstreetmap.org/?mlat=51.5075&amp;mlon=-0.1258#map=17/51.5075/-0.1258">View a larger map</a></p>

You will see an interactive map of central London with a marker on it. Users can drag and zoom inside the frame. The link below is useful for people who want to open the map in its own tab or app. In HTML attributes, the & in a URL is written as &; map services usually do this for you in the code they give you.

Security with the sandbox attribute

When you embed a page you don't control, you are trusting it. The sandbox attribute puts the iframe in a "sandbox", like a child's play area with a fence. With an empty sandbox, the embedded page cannot run scripts, submit forms, open pop-ups or navigate your page.

You can then allow only what it needs, one keyword at a time:

• allow-scripts: let it run JavaScript.
• allow-same-origin: let it keep its normal origin, so its cookies and storage work.
• allow-forms: let it submit forms.
• allow-popups: let it open new windows.

<iframe src="https://example.com/weather-widget" title="Today's weather in London" width="300" height="200" loading="lazy" sandbox="allow-scripts">
</iframe>

This widget can run its scripts, but it can't submit forms, open pop-ups or redirect your page.

Common mistake: Adding both allow-scripts and allow-same-origin to a frame from your own site. Together they let the framed page remove its own sandbox, so the protection is gone. Use this pair only for trusted content from another site.

Making iframes responsive and respecting privacy

An iframe has a fixed width and height, so a 560-pixel video is too wide for many phones. Keep the width and height attributes in your HTML (they tell the browser the shape), and later use CSS, for example width: 100% with aspect-ratio: 16 / 9, to make the frame shrink on small screens. You will learn this in the CSS course.

Remember that every embed loads content from another company. That company can see your visitor's IP address and may set cookies. Use privacy-friendly options like youtube-nocookie.com, use loading="lazy", and mention embedded services in your privacy policy. In some countries, such as those in the EU, you may need consent before loading certain embeds.

Practice exercise

Create an "About our school" page that embeds one YouTube video (in privacy-enhanced mode) and one map of any place you like. Give both iframes a clear title, loading="lazy", and keep the width and height. Add a link below the map to open it in a new tab.

Hint: Copy the embed code from the site, then check that the title describes the content, not just "iframe" or "video".

Key takeaways

• An <iframe> shows another web page inside yours, such as a video or map.
• Always add a descriptive title and use loading="lazy" for speed.
• allow and allowfullscreen control features; sandbox limits what untrusted content can do.
• Use youtube-nocookie.com and think about your visitors' privacy with every embed.
• Keep width and height in HTML and make iframes responsive later with CSS.