Images et contenus intégrés

Ajouter des images, des vidéos et des iframes

Ajoutez des images, intégrez des vidéos et incluez du contenu interactif via des iframes dans votre documentation.

​

Images

Ajoutez des images pour apporter du contexte visuel, des exemples ou une touche décorative à votre documentation.

​

Syntaxe d’image de base

Utilisez la syntaxe Markdown pour ajouter des images à votre documentation :

![Texte alternatif décrivant l'image](/path/to/image.png)

Incluez toujours un texte de remplacement descriptif pour améliorer l’accessibilité et le SEO. Il doit décrire clairement ce que l’image représente.

Les fichiers d’image doivent faire moins de 20 Mo. Pour des fichiers plus volumineux, hébergez-les sur un service CDN comme Amazon S3 ou Cloudinary.

​

Intégrations d’images en HTML

Pour un meilleur contrôle de l’affichage des images, utilisez des balises <img> en HTML :

<img 
  src="/images/dashboard.png" 
  alt="Interface principale du Dashboard"
  height="300"
  className="rounded-lg"
/>

​

Désactiver la fonction de zoom

Pour désactiver le zoom par défaut au clic sur les images, ajoutez la propriété noZoom :

<img 
  src="/images/screenshot.png" 
  alt="Texte alternatif descriptif"
  noZoom 
  height="200"
/>

​

Lier des images

Pour rendre une image cliquable, enveloppez l’image dans une balise de lien et ajoutez la propriété noZoom :

<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Logo Mintlify"
    noZoom 
    height="100"
  />
</a>

Les images à l’intérieur des balises d’ancre affichent automatiquement un pointeur pour indiquer qu’elles sont cliquables.

​

Images en mode clair et sombre

Pour afficher des images différentes selon les thèmes clair et sombre, utilisez les classes Tailwind CSS :

<!-- Image en mode clair -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interface en mode clair"
/>

<!-- Image en mode sombre -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interface en mode sombre"
/>

​

Vidéos

Mintlify prend en charge les balises HTML dans Markdown, ce qui vous donne la flexibilité nécessaire pour créer du contenu riche.

Incluez toujours un texte de remplacement à l’intérieur des éléments vidéo pour les navigateurs qui ne prennent pas en charge la lecture vidéo.

​

Intégrations YouTube

Intégrez des vidéos YouTube à l’aide d’éléments iframe :

<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="Lecteur vidéo YouTube"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

​

Vidéos auto‑hébergées

Utilisez l’élément HTML <video> pour des vidéos auto‑hébergées :

<video
  controls
  className="w-full aspect-video rounded-xl"
  src="lien-vers-votre-video.com"
></video>

​

Lecture automatique des vidéos

Pour lancer automatiquement une vidéo, utilisez :

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>

Lorsque vous utilisez la syntaxe JSX, écrivez les attributs à deux mots en camelCase : autoPlay, playsInline, allowFullScreen.

​

iframes

Intégrez du contenu externe à l’aide d’éléments iframe :

<iframe 
  src="https://example.com/embed" 
  title="Contenu intégré"
  className="w-full h-96 rounded-xl"
></iframe>

​

Ressources associées

Référence du composant Frame

Découvrez comment utiliser le composant Frame pour présenter des images.