iFrames et intégrations

Chaque <iframe> de votre documentation reçoit un traitement visuel prêt à l'emploi : coins arrondis, bordure encadrée et espacement cohérent avec le reste de votre page. Vous n'avez pas besoin d'ajouter de divs d'encapsulation ou de classes utilitaires pour que cela s'active.

Style automatique

Jamdesk applique un cadre cohérent à toutes les iframes au moment du rendu. Voici ce que reçoit chaque iframe :

La couleur du cadre provient de --color-bg-secondary et la ligne de bordure utilise --color-border. Les deux sont des propriétés CSS personnalisées liées à votre thème, de sorte que les modes clair et sombre obtiennent les bonnes couleurs sans travail supplémentaire de votre part.

Intégrer du contenu externe

Une intégration basique utilise une balise iframe HTML standard :

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

Incluez toujours un attribut title. Les lecteurs d'écran l'annoncent, et cela aide toute personne parcourant le code source de votre page à comprendre le contenu de chaque intégration.

Dimensionnement responsive

La plupart des fournisseurs d'intégration renvoient du contenu avec un ratio d'aspect fixe. L'utilitaire Tailwind aspect-video maintient l'iframe en 16:9 quelle que soit la largeur de la fenêtre, et w-full l'étire pour remplir le conteneur parent :

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

w-full définit width: 100% via Tailwind. Sans cela, l'iframe utilise par défaut la largeur intégrée du navigateur (généralement 300px), ce qui semble cassé sur les écrans larges.

Pour du contenu qui n'est pas en 16:9, comme un prototype Figma ou un dashboard, utilisez la syntaxe de ratio d'aspect arbitraire de Tailwind :

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

Remplacez 4/3 par le ratio adapté au contenu. aspect-[1/1] pour les intégrations carrées, aspect-[21/9] pour l'ultra-large, etc.

Vimeo

Les vidéos Vimeo s'intègrent via une iframe standard pointant vers l'URL de leur lecteur :

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

Remplacez VIDEO_ID par l'identifiant numérique de n'importe quelle URL Vimeo (le nombre après vimeo.com/). L'attribut allow accorde au lecteur intégré les permissions de plein écran et de picture-in-picture.

Intégrations courantes

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

Et ensuite ?