iFrames & Embeds

Every <iframe> in your docs gets visual treatment out of the box -- rounded corners, a framed border, and spacing that matches the rest of your page. You don't need to add wrapper divs or utility classes for this to kick in.

Automatic Styling

Jamdesk applies a consistent frame to all iframes at render time. Here's what each iframe receives:

The frame color comes from --color-bg-secondary and the border line uses --color-border. Both are CSS custom properties tied to your theme, so light and dark mode get the right colors without any extra work on your end.

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, and it helps anyone scanning your page source understand what each 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, and 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), which looks broken on wide screens.

For content that isn't 16:9 -- like a Figma prototype or a dashboard -- use Tailwind's arbitrary aspect ratio syntax:

<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

Vimeo videos embed through a standard iframe pointing at their 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.

Common Embeds

<iframe
  height="400"
  style={{width: '100%'}}
  src="https://codepen.io/USERNAME/embed/PEN_ID?default-tab=result"
  title="CodePen Embed"
  allowFullScreen
/>

<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"
/>

<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
/>

<iframe
  src="https://www.loom.com/embed/VIDEO_ID"
  width="100%"
  height="400"
  allowFullScreen
/>

What's Next?