# Composants média

Les composants média rendent des images, icônes, vidéos, audio et cadres intégrés. Ils gèrent le dimensionnement responsive, le chargement différé, les attributs d'accessibilité et le bac à sable de sécurité. Tous acceptent l'ensemble partagé `props` (où vivent la plupart des attributs média) ainsi que les modules `visibility` et `responsive` ; les références `$record.*` se résolvent dans `props.src`, `props.alt`, etc.

```yaml
components:
  - type: image
    props: { src: '$record.cover', alt: '$record.title', loading: lazy, objectFit: cover }
  - type: icon
    props: { name: check-circle, size: 20, color: 'var(--color-primary)' }
```

## `image`

Une image responsive.

| Propriété         | Description                                                   |
| ----------------- | ------------------------------------------------------------- |
| `props.src`       | URL de l'image (requis ; prend en charge `$record.*`).        |
| `props.alt`       | Texte alternatif (requis pour l'accessibilité).               |
| `props.loading`   | `lazy` diffère le chargement jusqu'à proximité de la fenêtre. |
| `props.srcset`    | Sources candidates pour la sélection responsive.              |
| `props.sizes`     | Indices de taille de source associés à `srcset`.              |
| `props.width`     | Largeur intrinsèque (empêche le décalage de mise en page).    |
| `props.height`    | Hauteur intrinsèque.                                          |
| `props.objectFit` | Mise à l'échelle : `cover`, `contain`, `fill`, `none`.        |

Un chargement échoué affiche un espace réservé. Encadrez une `image` dans un [`link`](/fr/docs/interactive-components#link) pour la rendre cliquable.

## `icon`

Une icône SVG inline du jeu d'icônes Lucide.

| Propriété           | Description                                                                                     |
| ------------------- | ----------------------------------------------------------------------------------------------- |
| `props.name`        | Nom d'icône Lucide (mappe vers le SVG correspondant ; prend en charge `$variable`).             |
| `props.size`        | Largeur/hauteur en pixels (défaut : 24).                                                        |
| `props.color`       | Couleur de trait SVG (par défaut `currentColor` ; prend en charge `$variable`).                 |
| `props.strokeWidth` | Largeur de trait SVG (défaut : 2).                                                              |
| `props.className`   | Classes Tailwind (p. ex. utilitaires de couleur).                                               |
| `props.ariaLabel`   | Libellé accessible — définit `role="img"` et `aria-label` ; sans lui l'icône est `aria-hidden`. |

Les icônes se rendent correctement comme enfants de `button` et `link`, et émettent `data-testid="icon-{name}"`.

## `video`

Un lecteur vidéo prenant en charge les fichiers directs et les intégrations YouTube/Vimeo.

| Propriété           | Description                                                                                        |
| ------------------- | -------------------------------------------------------------------------------------------------- |
| `props.src`         | URL vidéo directe ou URL d'intégration (YouTube/Vimeo se convertissent automatiquement en iframe). |
| `props.poster`      | Image d'aperçu affichée avant la lecture.                                                          |
| `props.controls`    | Afficher les contrôles de lecture.                                                                 |
| `props.autoplay`    | Lecture automatique au chargement.                                                                 |
| `props.muted`       | Démarrer en sourdine.                                                                              |
| `props.loop`        | Lecture en boucle.                                                                                 |
| `props.aspectRatio` | Dimensionnement responsive (`16:9`, `4:3`, ou personnalisé).                                       |
| `props.tracks`      | Pistes de sous-titres/légendes (format VTT).                                                       |

## `audio`

Un lecteur audio.

| Propriété        | Description                                                       |
| ---------------- | ----------------------------------------------------------------- |
| `props.src`      | URL audio (requis pour l'audio à source unique).                  |
| `props.controls` | Afficher les contrôles de lecture.                                |
| `props.autoplay` | Lecture automatique au chargement.                                |
| `props.loop`     | Lecture en boucle.                                                |
| `props.sources`  | Formats multiples avec types MIME (pour repli inter-navigateurs). |

## `iframe`

Un cadre externe intégré.

| Propriété                                            | Description                                                      |
| ---------------------------------------------------- | ---------------------------------------------------------------- |
| `props.src`                                          | URL du cadre (requis).                                           |
| `props.title`                                        | Titre accessible (requis pour l'accessibilité).                  |
| `props.sandbox`                                      | Attribut sandbox restreignant les capacités du cadre (sécurité). |
| `props.allow`                                        | Permissions accordées (p. ex. caméra, microphone).               |
| `props.width` / `props.height` / `props.aspectRatio` | Dimensionnement responsive.                                      |

## `carousel`

Un diaporama de diapositives enfants défilant horizontalement ou verticalement.

| Propriété           | Description                                                                    |
| ------------------- | ------------------------------------------------------------------------------ |
| `children`          | Composants de diapositive.                                                     |
| `props.orientation` | Direction de défilement : `horizontal` ou `vertical`.                          |
| `props`             | Attributs HTML supplémentaires (p. ex. options de lecture automatique/boucle). |

## `aspect-ratio`

Un encadreur qui maintient un ratio d'aspect fixe pour son enfant (généralement un élément média).

| Propriété     | Description                                  |
| ------------- | -------------------------------------------- |
| `props.ratio` | Le ratio d'aspect à imposer (p. ex. `16:9`). |
| `children`    | Le composant média (ou autre) à contraindre. |

## Pages connexes

- [Présentation des pages](/fr/docs/pages-overview) — le modèle de composants et la substitution de variables.
- [Composants de contenu](/fr/docs/content-components) — blocs de texte et de prose.
- [Composants de mise en page](/fr/docs/layout-components) — conteneurs et grilles pour la mise en page média.
- [SEO et métadonnées](/fr/docs/seo-meta) — images Open Graph et indices de préchargement.
- [Buckets](/fr/docs/buckets-overview) — stockage des médias téléversés référencés par `src`.