Iframes & Embeds

An <iframe> embeds one web page inside another — a YouTube video, a map, a payment form, a code sandbox. Because the embedded page comes from somewhere else, iframes also come with important security and performance controls.

Basic syntax

src is the page to embed. The title attribute is essential for accessibility: screen readers announce it so users know what the frame contains. width and height set its size (or use CSS).

Embedding a video or map

Most services give you ready-made embed code. A YouTube embed looks like this:

<iframe
  width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="How the web works — explainer video"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"></iframe>

The youtube-nocookie.com domain avoids setting tracking cookies until the user plays the video. allowfullscreen enables the full-screen button, and allow lists which browser features the embedded page may use.

Responsive iframes

An iframe has a fixed size unless you change it. The CSS aspect-ratio property makes it scale with its container:

srcdoc: inline content

srcdoc provides the frame's HTML directly instead of loading a URL. The live editors on this site use exactly this technique.

Security: sandbox

An embedded page can run scripts and, depending on its origin, try things like opening pop-ups or navigating your page. The sandbox attribute removes almost all permissions; you then add back only what's needed:

Other useful attributes

• loading="lazy" — don't load the frame until it's near the viewport. Embeds are heavy, so this is a big performance win.
• referrerpolicy — control what the embedded site learns about your page.
• name — lets links target the frame with target="name".

When sites refuse to be framed

Many sites — banks, social networks, Google search — forbid being embedded, using the X-Frame-Options header or the frame-ancestors rule of a Content Security Policy. This protects against "clickjacking", where an attacker hides a real site under a fake interface. If an iframe shows a blank page or an error, that's usually why, and there's nothing you can do from your side.

object and embed

The older <embed> and <object> elements were used for plugins like Flash, which no longer exist. Today you might occasionally see them used to show a PDF; a plain link to the PDF is often friendlier on mobile.

<object data="manual.pdf" type="application/pdf" width="600" height="400">
  <p><a href="manual.pdf">Download the manual (PDF)</a></p>
</object>

Try it yourself