> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Images et intégrations

> Ajoutez des images, des vidéos et des iframes.

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

<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." />
</Frame>

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

Ajoutez des images pour fournir du contexte visuel, des exemples ou pour agrémenter 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 theme={null}
![Texte alternatif décrivant l'image](/path/to/image.png)
```

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

Les fichiers image doivent faire 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 un meilleur contrôle de l’affichage des images, utilisez des balises HTML `<img>` :

```jsx theme={null}
<img 
  src="/images/dashboard.png" 
  alt="Interface principale du tableau de bord"
  style={{height: "300px", width: "400px"}}
  className="rounded-lg"
/>
```

<div id="resize-images-with-inline-styles">
  #### Redimensionner des images avec des styles en ligne
</div>

Utilisez des styles JSX en ligne avec l’attribut `style` pour redimensionner les images :

```jsx theme={null}
<img
  src="/images/architecture.png"
  style={{width: "450px", height: "auto"}}
  alt="Diagramme illustrant l'architecture du système"
/>
```

<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" theme={null}
<img 
  src="/images/screenshot.png" 
  alt="Texte alternatif descriptif"
  noZoom
/>
```

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

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

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

<Note>
  Les images à l’intérieur des balises d’ancrage affichent automatiquement un curseur en forme de pointeur pour indiquer qu’elles sont cliquables.
</Note>

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

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

```html theme={null}
<!-- 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), ce qui vous offre la flexibilité nécessaire pour créer du contenu riche.

<Tip>
  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 des vidéos.
</Tip>

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

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

```html theme={null}
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="Lecteur vidéo YouTube"
  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 vidéo YouTube" 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 des vidéos auto‑hébergées :

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

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

Pour lancer automatiquement une vidéo, utilisez :

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

<Note>
  Lorsque vous utilisez la syntaxe JSX, écrivez les attributs composés de 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 theme={null}
<iframe 
  src="https://example.com/embed" 
  title="Contenu intégré"
  className="w-full h-96 rounded-xl"
></iframe>
```

<div id="related-resources">
  ## Ressources connexes
</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>