iFrames et intégrations

Chaque <iframe> dans votre documentation bénéficie d'un traitement visuel prêt à l'emploi -- coins arrondis, bordure encadrée et espacement cohérent avec le reste de la page. Vous n'avez pas besoin d'ajouter des divs wrapper ou des classes utilitaires pour que cela fonctionne.

Style automatique

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

La couleur du cadre provient de --color-bg-secondary et la ligne de bordure utilise --color-border. Ces deux propriétés CSS personnalisées sont 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égration de contenu externe

Une intégration de base utilise une balise HTML iframe 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 il aide quiconque parcourt le code source de votre page à comprendre ce que contient chaque intégration.

Dimensionnement adaptatif

La plupart des fournisseurs d'intégration renvoient du contenu à un ratio d'aspect fixe. L'utilitaire aspect-video de Tailwind maintient l'iframe à 16:9 quelle que soit la largeur de la fenêtre, et w-full l'étend 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 lui, l'iframe utilise par défaut la largeur intégrée du navigateur (généralement 300px), ce qui paraît cassé sur les grands écrans.

Pour le 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 qui convient au contenu. aspect-[1/1] pour les intégrations carrées, aspect-[21/9] pour l'ultra-large, et ainsi de suite.

Vimeo

Les vidéos Vimeo s'intègrent via un iframe standard pointant vers leur URL de 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 les permissions de plein écran et d'image dans l'image au lecteur intégré.

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 ?