Composant Médias

Ce composant permet de créer un contenu médias DSFR. Il supporte les types de médias suivants : vidéo, vidéo externe (iframe YouTube, Dailymotion, etc.), audio et image.

Vidéo

Le type video permet d'intégrer une vidéo hébergée directement accessible par URL.

Composant

L'outro du MATTE

Extrait de code

/// media | L'outro du MATTE
    url: ../../assets/MIN_SG_16-9_1.mp4
    captions: ../../assets/MIN_SG_16-9_1.vtt
    poster: ../../assets/MIN_SG_16-9_1.png
///

Vidéo externe (iframe)

Le type video_external permet d'intégrer une vidéo hébergée sur une plateforme tierce (YouTube, Dailymotion, Peertube, etc.) via une iframe.

Composant

Présentation du Système de Design de l'État

Extrait de code

/// media | Présentation du Système de Design de l'État
    type: video_external
    url: https://www.youtube.com/embed/HyirpmPL43I
    ratio: 16x9
///

URL d'intégration

Pour les vidéos YouTube, utilisez l'URL d'intégration (format https://www.youtube.com/embed/ID_VIDEO) et non l'URL de partage classique.

Audio

Le type audio permet d'intégrer un fichier audio avec un lecteur natif.

Composant

Extrait audio de démonstration

Extrait de code

/// media | Extrait audio de démonstration
    type: audio
    url: ../../assets/example-audio.mp3
///

Image

Le type image permet d'intégrer une image dans un composant de contenu médias DSFR, avec une légende et un cadre conforme au DSFR.

Composant

Vue du bâtiment du ministère — Photographie du ministère — Source : MTECT

Extrait de code

/// media | Photographie du ministère — Source : MTECT
    type: image
    url: ../../assets/placeholder.16x9.png
    title: Vue du bâtiment du ministère
///

Légende avec lien

Tous les types de médias supportent l'ajout d'un lien dans la légende, via les options link et link_label.

Composant

L'outro du MATTEEn savoir plus sur le ministère

Extrait de code

/// media | L'outro du MATTE
    url: ../../assets/MIN_SG_16-9_1.mp4
    poster: ../../assets/MIN_SG_16-9_1.png
    link: https://www.ecologie.gouv.fr
    link_label: En savoir plus sur le ministère
///

Ratio d'affichage

L'option ratio permet de définir le ratio d'affichage du média. Par défaut, le ratio est 16x9. Voici un exemple avec un ratio 4x3 :

/// media | Image au format 4x3
    type: image
    url: ../../assets/placeholder.16x9.png
    ratio: 4x3
///

Options de médias

L'argument à côté du mot-clé media est la légende du média. Il est affiché en dessous du média dans un élément figcaption.

Option	Valeur par défaut	Description
type	video	Type de média : video, video_external, audio ou image.
url		URL du média à afficher.
title		Titre du média, utilisé comme attribut `title` pour les iframes et comme texte alternatif (`alt`) pour les images. Si non renseigné, la légende est utilisée à la place.
ratio	16x9	Ratio d'affichage du média. Valeurs possibles : 16x9, 4x3, 1x1, 32x9, 3x2, 3x4, 2x3.
poster		Vidéo uniquement : image de prévisualisation affichée avant le chargement de la vidéo.
captions		Vidéo uniquement : URL du fichier de sous-titres (format `.vtt`).
link		URL d'un lien ajouté à la légende du média.
link_label		Libellé du lien dans la légende. Si non renseigné, l'URL du lien est affichée.