> ## Documentation Index
> Fetch the complete documentation index at: https://smartac-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Images et intégrations

> Ajoutez des images, intégrez des vidéos YouTube et incluez des iframes dans vos pages MDX pour enrichir la documentation avec du contenu visuel et interactif.

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](/images/screenshot.png)
```

Les chemins d'image sont relatifs à la racine de votre dépôt de documentation. Par exemple, si votre image se trouve à `images/screenshot.png` dans votre dépôt, le chemin est `/images/screenshot.png`. Les chemins relatifs (par exemple, `./screenshot.png`) ne sont pas pris en charge.

<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-image-zoom">
  #### Désactiver le zoom des images
</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="svg-images">
  ### Images SVG
</div>

Les fichiers SVG qui utilisent des éléments `foreignObject` s'affichent différemment en production qu'en développement local. Le CDN d'images de Mintlify supprime `foreignObject` des SVG à titre de mesure de sécurité, ce qui peut tronquer ou masquer du texte et d'autres contenus HTML intégrés.

Cela affecte fréquemment les SVG exportés à partir d'outils comme [draw.io](https://www.drawio.com) lorsque le formatage de texte HTML ou le renvoi à la ligne est activé. Pour corriger cela, désactivez **Formatted Text** et **Word Wrap** sur tous les libellés de votre diagramme avant d'exporter en SVG. Consultez la [documentation draw.io](https://www.drawio.com/doc/faq/svg-export-text-problems) pour plus d'informations sur les exportations SVG.

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

<Tip>
  Encapsulez les iframes dans un composant [frame](/fr/components/frames) pour les maintenir dans la largeur de la colonne de texte et éviter tout débordement.

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

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