iFrames & Embeds
Embed external content like Vimeo, CodePen, Figma, and Loom in your docs with automatic styling and responsive sizing.
Every <iframe> in your docs gets rounded corners, a framed border, and spacing that matches the rest of your page. You don't need wrapper divs or utility classes.
Automatic Styling
Jamdesk applies this frame to every iframe at render time:
| Property | Value | Description |
|---|---|---|
| Border radius | 0.5rem | Rounded corners on content |
| Frame width | 8px | Visual padding around content |
| Border | 1px | Subtle border in theme color |
| Spacing | 1rem + 9px | Margin above and below |
The frame color comes from --color-bg-secondary. The border line uses --color-border. These CSS custom properties follow your theme, including dark mode.
Embedding External Content
A basic embed uses a standard HTML iframe tag:
<iframe
src="https://example.com/embed"
width="100%"
height="400"
title="Description of embedded content"
/>Always include a title attribute. Screen readers announce it. It also tells anyone reading your page source what the embed contains.
Responsive Sizing
Most embed providers return content at a fixed aspect ratio. The Tailwind aspect-video utility keeps the iframe at 16:9 regardless of viewport width. w-full stretches it to fill the parent container:
<iframe
className="w-full aspect-video"
src="https://example.com/embed"
title="16:9 responsive embed"
/>w-full sets width: 100% via Tailwind. Without it, the iframe defaults to the browser's built-in width (usually 300px). That looks broken on wide screens.
Use Tailwind's arbitrary aspect ratio syntax for content that isn't 16:9, like a Figma prototype or a dashboard:
<iframe
className="w-full aspect-[4/3]"
src="https://example.com/embed"
title="4:3 responsive embed"
/>Replace 4/3 with whatever ratio fits the content. aspect-[1/1] for square embeds, aspect-[21/9] for ultrawide, and so on.
Vimeo
Embed a Vimeo video with a standard iframe pointing at its player URL:
<iframe
className="w-full aspect-video rounded-xl"
src="https://player.vimeo.com/video/VIDEO_ID"
title="Vimeo video player"
allow="autoplay; fullscreen; picture-in-picture"
allowFullScreen
/>Swap VIDEO_ID for the numeric ID from any Vimeo URL (the number after vimeo.com/). The allow attribute grants fullscreen and picture-in-picture permissions to the embedded player.
Use the dedicated <YouTube> component for YouTube videos instead of a raw iframe. It lazy-loads the player and strips related video suggestions.
Common Embeds
Grab the embed URL from CodePen's "Embed" button. The default-tab parameter controls which panel shows first (result, html, css, or js).
<iframe
height="400"
style={{width: '100%'}}
src="https://codepen.io/USERNAME/embed/PEN_ID?default-tab=result"
title="CodePen Embed"
allowFullScreen
/>CodeSandbox embeds accept query parameters for font size, theme, and which file to show. The sandbox attribute controls what the iframe is allowed to do. CodeSandbox needs several permissions to run code in the browser.
<iframe
src="https://codesandbox.io/embed/SANDBOX_ID?fontsize=14&theme=dark"
style={{width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden'}}
title="CodeSandbox"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>Open a Figma file, click Share, then Get embed code. The URL goes into the src attribute. Make Figma embeds 450px or taller. Shorter heights clip the toolbar.
<iframe
style={{border: '1px solid rgba(0, 0, 0, 0.1)'}}
width="100%"
height="450"
src="https://www.figma.com/embed?embed_host=share&url=FIGMA_URL"
allowFullScreen
/>Copy the video ID from any Loom share link (the string after loom.com/share/). Loom embeds auto-play on hover by default.
<iframe
src="https://www.loom.com/embed/VIDEO_ID"
width="100%"
height="400"
allowFullScreen
/>