Interface de contrôle des tests
Retour

Contenu média (content)

Les médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégré à une page de contenu, il est recommandé de suivre les règles décrites dans la documentation.

Documentation

Media image edito

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image

<figure class="fr-content-media" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img src="../img/placeholder.16x9.png" class="fr-responsive-img" alt="[À MODIFIER | texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>

Media image edito, petite taille

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image

<figure class="fr-content-media fr-content-media--sm" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img src="../img/placeholder.16x9.png" class="fr-responsive-img" alt="[À MODIFIER | texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>

Media image edito, grande taille

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image

<figure class="fr-content-media fr-content-media--lg" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img src="../img/placeholder.16x9.png" class="fr-responsive-img" alt="[À MODIFIER | texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>

Media video edito, ratio d‘aspect 16/9 par défaut

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media">
    <div class="fr-responsive-vid">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 16/9 par défaut, petite taille

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media fr-content-media--sm">
    <div class="fr-responsive-vid">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 16/9 par défaut, grande taille

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media fr-content-media--lg">
    <div class="fr-responsive-vid">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 4x3

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media">
    <div class="fr-responsive-vid fr-responsive-vid--4x3">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 4x3, petite taille

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media fr-content-media--sm">
    <div class="fr-responsive-vid fr-responsive-vid--4x3">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 4x3, grande taille

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media fr-content-media--lg">
    <div class="fr-responsive-vid fr-responsive-vid--4x3">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 1x1

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media">
    <div class="fr-responsive-vid fr-responsive-vid--1x1">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 1x1, petite taille

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media fr-content-media--sm">
    <div class="fr-responsive-vid fr-responsive-vid--1x1">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>

Media video edito, ratio d‘aspect 1x1, grande taille

© Légende de la vidéo
Label du bouton de la transcription 

<div class="fr-content-media fr-content-media--lg">
    <div class="fr-responsive-vid fr-responsive-vid--1x1">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>