iFrames e incorporações

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:

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:

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

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

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

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

Incorporações comuns

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

O que vem a seguir?