---
title: iFrames & Embeds
sidebarTitle: iFrames
description: Embed external content like Vimeo, CodePen, Figma, and Loom in your docs with automatic styling and responsive sizing.
---

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:

| 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` 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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.

<Tip>
For YouTube videos, use the dedicated [`<YouTube>` component](/content/youtube) instead of a raw iframe. It lazy-loads the player and strips related video suggestions.
</Tip>

## Common Embeds

<AccordionGroup>
  <Accordion title="CodePen" icon="codepen">
    Grab the embed URL from CodePen's "Embed" button. The `default-tab` parameter controls which panel shows first (`result`, `html`, `css`, or `js`).

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

  <Accordion title="CodeSandbox" icon="cube">
    CodeSandbox embeds support 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.

    ```html
    <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"
    />
    ```
  </Accordion>

  <Accordion title="Figma" icon="figma">
    Open a Figma file, click **Share**, then **Get embed code**. The URL goes into the `src` attribute. Figma embeds work best at `450px` or taller -- shorter heights clip the toolbar.

    ```html
    <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
    />
    ```
  </Accordion>

  <Accordion title="Loom" icon="video">
    Copy the video ID from any Loom share link (the string after `loom.com/share/`). Loom embeds auto-play on hover by default.

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

## What's Next?

<Columns cols={3}>
  <Card title="Images" icon="image" href="/content/images">
    Markdown images, dimensions, and captions
  </Card>
  <Card title="YouTube Embeds" icon="youtube" href="/content/youtube">
    YouTube videos and Shorts
  </Card>
  <Card title="Videos" icon="video" href="/content/videos">
    Local MP4 and WebM files
  </Card>
</Columns>