Contenu médias

Le composant Contenu médias permet d'intégrer des contenus multimédias tels que des vidéos, des images de manière accessible et responsive.

HTML

Structure du composant

Le composant Contenu médias permet d'intégrer des images ou des vidéos de manière accessible et responsive. Sa structure est la suivante :

Un élément <figure> de classe fr-content-media contient le média et ses informations associées.
- Dans le cas d'une image :
  - Un élément <div> de classe fr-content-media__img contient l'image.
  - L'image est un élément <img> avec la classe fr-responsive-img, ou un <svg>.
  - L’alternative de l’image, attribut alt, doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte.
- Dans le cas d'une vidéo :
  - Un élément <video> avec l'attribut controls, ou une <iframe>, et la classe fr-responsive-vid.
  - L'alternative de la vidéo doit être présente dans un paragraphe <p> au sein de la balise <video> ou au niveau de l'attribut title de l'<iframe>.
- Un élément <figcaption> de classe fr-content-media__caption contenant :
  - La description et/ou la source du média.
  - Un lien <a class="fr-link"> vers la source du média.

Les informations visuelles ou auditives doivent être accessibles pour les utilisateurs qui ne peuvent pas voir ou entendre le contenu multimédia. Pour cela, il est recommandé d'ajouter une description ou une transcription du contenu multimédia.

Structure HTML d'une image

Image :

<figure role="group" class="fr-content-media" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img" src="example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a href="#" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

SVG :

<figure role="group" class="fr-content-media" aria-label="Description / Source">
    <!-- Les SVG illustratifs (non porteur de sens) doivent avoir l'attribut aria-hidden="true" -->
    <!-- Les SVG porteurs de sens doivent avoir l'attribut role="img" et un attribut aria-label -->
    <svg role="img" aria-label="[A modifier - titre ou texte contenu dans l’image]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">(...)</svg>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a href="#" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Structure HTML d'une vidéo

Iframe :

<figure role="group" class="fr-content-media">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-1983" href="#" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Vidéo :

<figure role="group" class="fr-content-media">
    <video src="video.mp4" class="fr-responsive-vid" controls>
        <p>Alternative de la vidéo - voir transcription ci-dessous</p>
    </video>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-1983" href="#" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Dans le cas d'un fichier audio, la structure est similaire à celle d'une vidéo, mais avec un élément <audio> à la place de la vidéo.

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core et du contenu médias doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/content/content.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/content/content.legacy.min.css" rel="stylesheet">

Variantes de tailles

Le composant Contenu médias est prévu pour être utilisé au sein d'une page de contenu. Les pages de contenus ne doivent pas prendre la totalité de la largeur de la page en desktop, il est conseillé de placer le contenu dans une grille de 6 à 10 colonnes en desktop.

Par défaut, un contenu média prendra la largeur du conteneur. Il existe des variantes de tailles permettant de le render plus large ou moins large que le conteneur :

Par défaut : 100% de la largeur du conteneur.
La classe .fr-content-media--sm : 75% de la largeur du conteneur (centré).
La classe .fr-content-media--lg : 125% de la largeur du conteneur.

La description et la source du média restent alignés sur la gauche du conteneur.

Exemples de variantes de tailles

SM :

<figure role="group" class="fr-content-media fr-content-media--sm">
    (...)
</figure>

LG :

<figure role="group" class="fr-content-media fr-content-media--lg">
    (...)
</figure>

Variantes de ratios

Les classes utilitaires de ratios , disponibles dans le core, permettent de définir le ratio de l'image ou de la vidéo.

Pour les images, les classes suivantes sont disponibles :

Le format par défaut et conseillé des images est le 16:9.
fr-ratio-32x9 : ratio 16:9/2
fr-ratio-16x9 : par défaut, pour forcer le ratio 16:9
fr-ratio-3x2 : ratio 3:2
fr-ratio-4x3 : ratio 4:3
fr-ratio-1x1 : ratio 1:1
fr-ratio-3x4 : ratio 3:4
fr-ratio-2x3 : ratio 2:3

Pour les vidéos, les classes suivantes sont disponibles :

fr-ratio-16x9 : par défaut, pour forcer le ratio 16:9
fr-ratio-4x3 : ratio 4:3
fr-ratio-1x1 : ratio 1:1

JavaScript

Aucun JavaScript spécifique n'est requis pour le composant Contenu médias.

Un fallback JS est prévu pour la gestion des ratios sur les navigateurs ne supportant pas la propriété CSS aspect-ratio. Il est inclus dans le fichier JS du core.

Installation du JavaScript

Pour fonctionner correctement, le fichier JS du core doit être importé. L'import doit se faire en fin de page, avant la fermeture du body, et de préférence avec le fichier minifié, car plus léger.

<script type="module" src="dist/core/core.min.js"></script>

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :

<script type="text/javascript" nomodule src="dist/core/core.legacy.min.js"></script>

Une fois le fichier JS importé, la gestion des ratios est automatiquement prise en charge par le navigateur.

Note de version

Voir les évolutions sur github

v1.12.0 - 19 juin 2024

modifie la structure HTML du composant comportant une transcription

passe la transcription apres la figure
a11y ajoute texte alternatif sur infographie mentionnant transcription en dessous
ajout un attribut title sur les videos iframe

🐛 fix

content

#932

v1.11.1 - 31 janvier 2024

met a jour les mises en situation

ajoute une transcription à l'exemple de “Média image en svg, porteur d’information”
met à jour l'exemple de “Média image avec une transcription” avec une image porteuse de sens et renseigne la transcription correspondante

✨ feat

content

#866

v1.10.0 - 19 juillet 2023

correctif title et label bouton Agrandir

Retrait du title sur le bouton agrandir
Ajout label agrandir dans les exemples de content

🐛 fix

transcription

content

#708

v1.7.0 - 21 juillet 2022

bug ratio vidéos ios

fix

content

core

#352

v1.6.0 - 14 juin 2022

ajout utilitaire fr-ratio et aspect-ratio des content img & vid

refactor

core

card

content

#316

v1.4.0 - 16 mars 2022

retours dépréciation

fix

header

content

#241

v1.2.0 - 17 novembre 2021

Le composant media ne fonctionne pas avec une image svg

fix

content

#54

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github