Iframes and Embeds

An iframe embeds another web page inside yours — a map, a video player, a payment form, a code demo.

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="How to shape a sourdough loaf (video)"
  width="560" height="315"
  loading="lazy"
  allow="encrypted-media; picture-in-picture; fullscreen"
  referrerpolicy="strict-origin-when-cross-origin"></iframe>

title — required for accessibility: screen readers announce it so people know what the frame contains.
width / height — reserve space to prevent layout shift (CSS aspect-ratio makes it fluid).
loading="lazy" — don't load the frame until it's near the viewport. Third-party embeds are often heavy (a video player can be hundreds of kilobytes of script).
allow — a permissions policy: which powerful features (camera, geolocation, full screen, ...) the embedded page may use.
referrerpolicy — how much of your URL the embedded site sees.

sandbox

sandbox puts the frame in a locked-down mode. With an empty value, the framed page can't run scripts, submit forms, open pop-ups, or navigate your page. Add back only what it needs:

<iframe src="https://widgets.example/poll" title="Reader poll"
        sandbox="allow-scripts allow-forms" width="400" height="300"></iframe>

Never combine allow-scripts and allow-same-origin for content from your own origin — the framed page could then remove its own sandbox.

srcdoc

srcdoc embeds HTML directly — handy for previews. A script reads the frame's content once it loads:

<iframe id="preview" title="Preview" srcdoc="<p>Hello from <b>srcdoc</b></p>" width="300" height="80"></iframe>
<script>
  const frame = document.getElementById("preview");
  frame.addEventListener("load", () => {
    console.log(frame.contentDocument.body.innerHTML);
  });
</script>

<p>Hello from <b>srcdoc</b></p>

Keeping others from framing you

Other sites can put your page in an iframe and trick people into clicking things (clickjacking). Prevent it on the server with the HTTP header Content-Security-Policy: frame-ancestors 'self' (or the older X-Frame-Options: DENY). These must be HTTP headers — they don't work as meta tags.

embed and object

embed and object embed external content such as PDFs. Browser PDF viewers vary, and mobile browsers often won't display embedded PDFs — a plain link is usually friendlier:

<object data="menu.pdf" type="application/pdf" width="600" height="800">
  <p><a href="menu.pdf">Download the menu (PDF, 200 KB)</a></p>
</object>

Facades for heavy embeds

For videos, a common performance trick is a facade: show a thumbnail image with a play button, and only insert the real iframe when someone clicks it.

Practice

Embed a map page https://maps.example/embed?shop=12 lazily, with a title, a fixed size of 600×450, scripts allowed but no forms or pop-ups, and no referrer sent.

Show solution

<iframe src="https://maps.example/embed?shop=12" title="Map of the shop location"
        width="600" height="450" loading="lazy"
        sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>