Skip to main content
Embed renders an iframe for external content. Pass a url for hosted content (YouTube, Google Maps, PDFs) or html for custom HTML/JS (Three.js scenes, Canvas visualizations, shader previews).

​
Basic Usage

Any URL that works in an iframe works here. The first positional argument is url, so Embed("https://...") works as shorthand.

​
HTML Mode

For custom content like interactive visualizations, pass raw HTML via the html parameter. The content runs in an isolated iframe, so it can include <script> tags, Canvas, WebGL, or any client-side code:

​
From Embed Code

Services like YouTube, Google Maps, and Spotify provide embed codes as raw <iframe> HTML. Embed.from_iframe() parses the tag and extracts src, width, height, allow, and sandbox automatically — just paste the snippet:
Pasting an embed code
from prefab_ui.components import Embed

Embed.from_iframe(
    '<iframe src="https://open.spotify.com/embed/track/2CgBqLufSdwMt0FMIu1CVn"'
    ' width="100%" height="352" allow="autoplay; encrypted-media;'
    ' fullscreen; picture-in-picture"></iframe>'
)
Bare numeric dimensions (like height="352") are automatically converted to CSS values ("352px"). Any keyword arguments override the parsed attributes.

​
Sandbox and Permissions

Embed exposes two standard HTML iframe attributes for controlling what the embedded content can do: sandbox and allow. These are independent of each other — sandbox restricts capabilities, allow grants access to browser APIs.

​
sandbox

The HTML sandbox attribute restricts the iframe’s capabilities. By default, no sandbox is applied — the iframe has full capabilities. Set sandbox to a space-separated list of permissions to restrict what the content can do:
Restricting capabilities
from prefab_ui.components import Embed

# Scripts can run, but no access to parent origin
Embed(url="https://example.com", sandbox="allow-scripts")

# Scripts + forms + same-origin access
Embed(
    url="https://example.com",
    sandbox="allow-scripts allow-same-origin allow-forms",
)
Common sandbox tokens: allow-scripts, allow-same-origin, allow-forms, allow-popups, allow-modals.

​
allow

The HTML allow attribute controls which browser Permissions Policy features are available to the embedded content — things like fullscreen, autoplay, camera, microphone, and geolocation. Most embeds don’t need this; it’s primarily relevant for video embeds (fullscreen button) or content that accesses device APIs:
Feature policies
from prefab_ui.components import Embed

Embed(
    url="https://www.youtube.com/embed/dQw4w9WgXcQ",
    allow="fullscreen; autoplay",
)

​
API Reference

Embed Parameters

​
url
str | None
default:"None"
URL to embed (iframe src). Mutually exclusive with html.
​
html
str | None
default:"None"
HTML content to embed (iframe srcdoc). Mutually exclusive with url.
​
width
str | None
default:"None"
CSS width value with units (e.g., "100%", "640px").
​
height
str | None
default:"None"
CSS height value with units.
​
sandbox
str | None
default:"None"
Iframe sandbox attribute. Space-separated list of permissions like "allow-scripts allow-same-origin".
​
allow
str | None
default:"None"
Iframe allow attribute for feature policies like "fullscreen; autoplay".
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Embed
{
  "type": "Embed",
  "url?": "string",
  "html?": "string",
  "width?": "string",
  "height?": "string",
  "sandbox?": "string",
  "allow?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Embed.