Embedding maps and videos

A page inside a page

The iframe element ("inline frame") shows a whole other web page inside a rectangle on your page. You see it every day without noticing: the YouTube player on a blog, the Google Map on a contact page, a booking widget on a salon's site, an ad. Each of those is a separate page, hosted by someone else, displayed in a frame.

<iframe src="https://example.com" title="Example website" width="600" height="300"></iframe>

• src is the address of the page to show.
• width and height set the size of the frame in pixels. Set them, or the browser picks a small default box (about 300 by 150).
• title describes the frame. More on this below.

Unlike img, iframe is not a void element: it has a closing tag. Anything between the tags is only shown by very old browsers.

Where embed codes come from

You rarely write the src yourself. Services give you a snippet to copy: on YouTube, Share → Embed; on Google Maps, Share → Embed a map. Paste it where you want the player or map to appear.

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=77.19%2C28.60%2C77.23%2C28.63&amp;layer=mapnik"
  title="Map showing central Delhi"
  width="600" height="350"
  loading="lazy"></iframe>

Notice the & in the address. A bare & inside an HTML attribute should be written as &; copied embed codes usually already do this.

Make embeds accessible: title

A sighted visitor sees a map. A screen reader user, moving through the page by element, reaches "frame" and hears nothing useful unless you describe it. The title attribute is what gets announced:

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="How to bake bread: a 10-minute lesson"></iframe>

Write what the visitor would want to know: the subject, not the word "video". An iframe without a title is one of the most common accessibility failures on the web, and one of the easiest to fix.

Make embeds fast: loading="lazy"

A video player downloads scripts, fonts and thumbnails before anyone presses play. If it sits at the bottom of a long page, those bytes slow down everything above it. Add loading="lazy" and the browser waits until the visitor scrolls near:

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Lesson video" width="560" height="315" loading="lazy" allowfullscreen></iframe>

Do not lazy-load an embed that is the first thing on the page; it should start right away. allowfullscreen lets the visitor expand the player.

YouTube also offers a privacy-friendlier address, youtube-nocookie.com, which delays the cookies YouTube would otherwise set as soon as the page loads.

Keep embeds in check: sandbox

An embedded page is code you did not write and cannot change. The sandbox attribute shrinks what it is allowed to do:

<iframe src="widget.html" title="Quiz widget" sandbox="allow-scripts" width="400" height="300"></iframe>

With sandbox present and empty, the frame cannot run scripts, submit forms, open pop-ups, or navigate your page. You then add back only what it needs: allow-scripts, allow-forms, allow-popups and so on. This is exactly how the live editors in these lessons run your code safely.

Avoid giving a frame both allow-scripts and allow-same-origin for content you do not trust; together they let the frame remove its own sandbox.

Responsive embeds

A fixed 560-pixel frame overflows a 360-pixel phone. A common fix uses CSS, which you will meet in the CSS course:

<style>
  .video { width: 100%; aspect-ratio: 16 / 9; border: 0; }
</style>
<iframe class="video" title="Example frame" src="about:blank"></iframe>
<p>The frame keeps a 16:9 shape at any width.</p>

aspect-ratio keeps the shape while the width follows the container.

Why a site may refuse to be embedded

Try putting a bank's login page in an iframe and you will get a blank box. Sites can send a header telling browsers not to display them in frames. They do it so that another site cannot place their page invisibly under a button and trick visitors into clicking (called clickjacking). If a site offers an embed code, use that; it is built to be framed.

Common mistakes

• No title, so screen reader users meet an unnamed frame.
• Embedding someone's page without permission because it loaded in a test. Check the terms, and use the official embed code.
• No width and height, so the page jumps when the frame loads.
• Lazy-loading the first thing on the page, which delays what the visitor came to see.
• Putting your own site's content in an iframe instead of using links or normal page structure. Frames hurt search ranking and sharing.

Exercise

Embed a map for your town. Give it a descriptive title, a 600 by 350 size, lazy loading, and a sandbox that allows scripts only.

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=77.19%2C28.60%2C77.23%2C28.63&amp;layer=mapnik"
  title="Map of central Delhi showing our office"
  width="600" height="350"
  loading="lazy"
  sandbox="allow-scripts"></iframe>