Embed

Usage

<Embed> is the generic iframe wrapper. Use it for anything that gives you an embed URL but isn't a video.

<Embed
  src="https://codesandbox.io/embed/abc123"
  title="Live demo"
  aspectRatio="16/9"
/>

Common embed sources

<Embed
  src="https://codesandbox.io/embed/abc123?fontsize=14&hidenavigation=1"
  title="Interactive code playground"
/>

<Embed
  src="https://stackblitz.com/edit/abc?embed=1"
  title="StackBlitz project"
/>

<Embed
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fabc"
  title="Figma design"
  aspectRatio="4/3"
/>

<Embed
  src="https://jsfiddle.net/abc/embedded/"
  title="JSFiddle example"
/>

Aspect ratio

Default is 16/9. Override based on the embedded content's natural ratio:

Sandbox

By default the iframe runs with sandbox="allow-scripts allow-same-origin allow-popups allow-forms", which works for almost all common embeds. Override to lock down further or open up if needed:

<!-- Stricter: scripts allowed but no same-origin access -->
<Embed src="..." sandbox="allow-scripts" />

<!-- More permissive: enable downloads -->
<Embed src="..." sandbox="allow-scripts allow-same-origin allow-downloads" />

<!-- No sandbox at all (rare — only for fully trusted content) -->
<Embed src="..." sandbox="" />

Allow attribute

For embeds that need device permissions (camera, microphone, fullscreen), pass an allow string:

<Embed
  src="https://meet.example.com/room/abc"
  allow="camera; microphone; fullscreen"
  title="Live meeting embed"
/>

Lazy loading

The iframe uses loading="lazy", so it only loads when scrolled into view. Saves bandwidth for embeds far down the page.

Differences from <Video>

If your URL is a video from a major provider, use <Video> — it picks the right embed URL format automatically (e.g. converts youtube.com/watch?v=... to youtube-nocookie.com/embed/...).

Props