> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Images et intégrations

> Ajouter des images, des vidéos et des iframes

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

Toutes les ressources statiques de votre dépôt de documentation sont automatiquement servies au bon chemin sur votre domaine. Par exemple, si vous avez `/images/my-logo.png` dans votre dépôt, l’image sera disponible à l’adresse `https://docs.yoursite.com/images/my-logo.png`.

<Frame>
  <img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Photographie d’un paysage pittoresque avec des fleurs violettes au premier plan, des montagnes à l’arrière-plan et un ciel bleu parsemé de nuages épars." />
</Frame>

<div id="images">
  ## Images
</div>

Ajoutez des images pour offrir un contexte visuel, illustrer par des exemples ou enrichir votre documentation.

<div id="basic-image-syntax">
  ### Syntaxe d’image de base
</div>

Utilisez la [syntaxe Markdown](https://www.markdownguide.org/basic-syntax/#images) pour ajouter des images à votre documentation :

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

<Tip>
  Incluez toujours un texte alternatif descriptif pour améliorer l’accessibilité et le référencement (SEO). Le texte alternatif doit décrire clairement ce que montre l’image.
</Tip>

Les fichiers image doivent peser moins de 20 Mo. Pour les fichiers plus volumineux, hébergez-les sur un service CDN comme [Amazon S3](https://aws.amazon.com/s3) ou [Cloudinary](https://cloudinary.com).

<div id="html-image-embeds">
  ### Intégrations d’images HTML
</div>

Pour mieux contrôler l’affichage des images, utilisez les balises HTML `<img>` :

```html
<img 
  src="/images/dashboard.png" 
  alt="Interface du tableau de bord principal"
  height="300"
  className="rounded-lg"
/>
```

<div id="disable-zoom-functionality">
  #### Désactiver la fonction de zoom
</div>

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

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

<div id="link-images">
  #### Lier des images
</div>

Pour rendre une image cliquable, enveloppez-la dans une balise d’ancre et ajoutez la propriété `noZoom` :

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

<Note>
  Les images placées dans des balises d’ancre affichent automatiquement un curseur en forme de pointeur pour indiquer qu’elles sont cliquables.
</Note>

<div id="light-and-dark-mode-images">
  #### Images en mode clair et sombre
</div>

Pour afficher des images différentes en mode clair et en mode sombre, utilisez les classes Tailwind CSS :

```html
<!-- 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"
/>
```

<div id="videos">
  ## Vidéos
</div>

Mintlify prend en charge les [balises HTML dans Markdown](https://www.markdownguide.org/basic-syntax/#html), vous offrant la flexibilité nécessaire pour créer du contenu riche.

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

<div id="youtube-embeds">
  ### Intégrations YouTube
</div>

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

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

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

<div id="self-hosted-videos">
  ### Vidéos auto-hébergées
</div>

Utilisez l’élément HTML `<video>` pour le contenu vidéo auto‑hébergé :

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

<div id="autoplay-videos">
  ### Lecture automatique des vidéos
</div>

Pour lancer automatiquement la lecture d’une vidéo, utilisez :

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

<Note>
  Lorsqu’on utilise la syntaxe JSX, écrivez les attributs à deux mots en camelCase : `autoPlay`, `playsInline`, `allowFullScreen`.
</Note>

<div id="iframes">
  ## iframes
</div>

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

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

<div id="related-resources">
  ## Ressources associées
</div>

<Card title="Référence du composant Frame" icon="frame" horizontal href="/fr/components/frames">
  Découvrez comment utiliser le composant Frame pour présenter des images.
</Card>