Embed

2 min readStableBeginner

Embed drops another page into a responsive iframe. The component rewrites YouTube links to the no-cookie player before they load and renders every frame inside a sandbox, while the frame-src allowlist in next.config.mjs decides which hosts a browser will load at all. Widen that list to reach a host it does not cover yet.

Quick Start

One url is all it takes. The frame fills the content width at 16:9.

quick-start.mdx

MDX

<Embed
  url="https://www.youtube.com/watch?v=jNQXAC9IVRw"
  title="Me at the zoo"
/>

Adding Options

title is what a screen reader announces, and aspectRatio swaps the box to 4:3 or 1:1.

aspect-ratio.mdx

MDX

<Embed
  url="https://www.youtube.com/watch?v=jNQXAC9IVRw"
  title="Me at the zoo in a 4:3 frame"
  aspectRatio="4:3"
/>

Advanced

Short youtu.be links and youtube.com/embed/ links get the same treatment, so the square frame below still points at https://www.youtube-nocookie.com/embed/jNQXAC9IVRw. The sandbox is fixed. Every frame carries allow-scripts allow-same-origin allow-popups allow-forms, plus allowfullscreen and an allow list covering accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, and picture-in-picture, which is what lets a video player go fullscreen or start on its own.

allow-same-origin restores only the embedded page's own origin, so that page keeps its own storage and cookies. It never grants access to this page's origin; the browser keeps parent and child origin-isolated regardless of sandbox attributes. The real boundary is the Content-Security-Policy frame-src list in next.config.mjs, which allows only 'self', youtube-nocookie.com, github.com, and gist.github.com to load at all. The browser blocks any other URL before this component's sandbox setting applies.

short-link.mdx

MDX

<Embed
  url="https://youtu.be/jNQXAC9IVRw"
  title="The same video from a short link"
  aspectRatio="1:1"
/>

A URL that isn't a YouTube link skips the rewrite and loads exactly as written. Because frame-src starts with 'self', a route from this same site counts as one of those URLs: no extra configuration, no absolute origin needed.

same-origin.mdx

MDX

<Embed url="/llms.txt" title="This site's llms.txt index" />

Options

urlstringrequired

The URL to embed. YouTube watch, youtu.be, and youtube.com/embed/ links are rewritten to https://www.youtube-nocookie.com/embed/<id>; every other URL, including a site-relative path such as /llms.txt, loads as written.

titlestringDefault: Embedded content

Accessible iframe title, announced by screen readers. An empty string falls back to the default.

aspectRatiostringDefault: 16:9

Frame shape. 16:9 maps to aspect-video, 4:3 to aspect-4/3, and 1:1 to aspect-square. Any other value leaves the frame with no height class at all, so pick one of the three.

Every frame loads with loading="lazy", so a page full of embeds only fetches the ones a reader scrolls to.

Image Zoom

Was this page helpful?