---
title: iFrames e incorporações
sidebarTitle: iFrames
description: Incorpore conteúdo externo, como Vimeo, CodePen, Figma e Loom, à sua documentação com estilização automática e dimensionamento responsivo.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Todo `<iframe>` na sua documentação recebe um tratamento visual pronto para uso: cantos arredondados, uma borda de moldura e espaçamento alinhado ao restante da página. Não é necessário adicionar divs wrapper nem classes utilitárias para ativar esse comportamento.

## Estilização automática

O Jamdesk aplica uma moldura consistente a todos os iframes no momento da renderização. Veja o que cada iframe recebe:

| Propriedade | Valor | Descrição |
|----------|-------|-------------|
| Raio da borda | `0.5rem` | Cantos arredondados no conteúdo |
| Largura da moldura | `8px` | Preenchimento visual ao redor do conteúdo |
| Borda | `1px` | Borda discreta na cor do tema |
| Espaçamento | `1rem + 9px` | Margem acima e abaixo |

A cor da moldura vem de `--color-bg-secondary`, e a linha da borda usa `--color-border`. Ambas são propriedades personalizadas de CSS vinculadas ao seu tema, portanto os modos claro e escuro usam as cores corretas sem exigir trabalho adicional.

## Incorporando conteúdo externo

Uma incorporação básica usa uma tag iframe HTML padrão:

```html
<iframe
  src="https://example.com/embed"
  width="100%"
  height="400"
  title="Description of embedded content"
/>
```

Sempre inclua um atributo `title`. Os leitores de tela o anunciam, e ele ajuda qualquer pessoa que esteja examinando o código-fonte da página a entender o que cada incorporação contém.

## Dimensionamento responsivo

A maioria dos provedores de incorporação retorna conteúdo com uma proporção fixa. O utilitário `aspect-video` do Tailwind mantém o iframe em 16:9 independentemente da largura da janela de visualização, enquanto `w-full` o estende para preencher o contêiner pai:

```html
<iframe
  className="w-full aspect-video"
  src="https://example.com/embed"
  title="16:9 responsive embed"
/>
```

`w-full` define `width: 100%` por meio do Tailwind. Sem ele, o iframe usa como padrão a largura integrada do navegador, geralmente 300px, o que fica desproporcional em telas largas.

Para conteúdo que não tem proporção 16:9, como um protótipo do Figma ou um dashboard, use a sintaxe de proporção arbitrária do Tailwind:

```html
<iframe
  className="w-full aspect-[4/3]"
  src="https://example.com/embed"
  title="4:3 responsive embed"
/>
```

Substitua `4/3` pela proporção adequada ao conteúdo. Use `aspect-[1/1]` para incorporações quadradas, `aspect-[21/9]` para formatos ultrawide e assim por diante.

## Vimeo

Os vídeos do Vimeo são incorporados por meio de um iframe padrão apontado para a URL do player:

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

Substitua `VIDEO_ID` pelo ID numérico de qualquer URL do Vimeo, o número após `vimeo.com/`. O atributo `allow` concede permissões de tela cheia e picture-in-picture ao player incorporado.

<Tip>
Para vídeos do YouTube, use o componente [`<YouTube>`](/pt/content/youtube) dedicado em vez de um iframe simples. Ele carrega o player sob demanda e remove as sugestões de vídeos relacionados.
</Tip>

## Incorporações comuns

<AccordionGroup>
  <Accordion title="CodePen" icon="codepen">
    Copie a URL de incorporação do botão "Embed" do CodePen. O parâmetro `default-tab` controla qual painel aparece primeiro (`result`, `html`, `css` ou `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">
    As incorporações do CodeSandbox aceitam parâmetros de consulta para tamanho da fonte, tema e arquivo a ser exibido. O atributo `sandbox` controla o que o iframe pode fazer. O CodeSandbox precisa de várias permissões para executar código no navegador.

    ```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">
    Abra um arquivo do Figma, clique em **Share** e depois em **Get embed code**. A URL deve ser inserida no atributo `src`. As incorporações do Figma funcionam melhor com `450px` ou mais de altura; alturas menores cortam a barra de ferramentas.

    ```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">
    Copie o ID do vídeo de qualquer link de compartilhamento do Loom, a string após `loom.com/share/`. As incorporações do Loom são reproduzidas automaticamente ao passar o cursor por padrão.

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

## O que vem a seguir?

<Columns cols={3}>
  <Card title="Imagens" icon="image" href="/pt/content/images">
    Imagens Markdown, dimensões e legendas
  </Card>
  <Card title="Incorporações do YouTube" icon="youtube" href="/pt/content/youtube">
    Vídeos e Shorts do YouTube
  </Card>
  <Card title="Vídeos" icon="video" href="/pt/content/videos">
    Arquivos MP4 e WebM locais
  </Card>
</Columns>