Média image edito
![[À MODIFIER - vide ou texte alternatif de l’image]](../../../example/img/placeholder.16x9.png)
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 32x9
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-32x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 16x9
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 3x2
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-3x2" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 4x3
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-4x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 1x1
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-1x1" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 3x4
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-3x4" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 2x3
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-2x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image en svg, porteur d’information
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<!-- Les SVG porteurs de sens doivent avoir l'attribut role="img" et être labeliser par l'attribut aria-label="[A modifier - titre ou texte contenu dans l’image]" -->
<svg version="1.1" role="img" aria-label=”Gouvernement” xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 895 455" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #1F356C;
}
.st1 {
fill: #000091;
}
.st2 {
fill: #E1000F;
}
.st3 {
fill: #808080;
}
</style>
<rect fill="#ffffff" width="895" height="455"></rect>
<g>
<g>
<g>
<path d="M61.4,206.5v-12.2H43v-13.3h33v30.7c-6.7,9-17.9,14.7-31.4,14.7c-23.4,0-39.4-17.5-39.4-38.1c0-20.6,15.6-38.1,38.4-38.1
c13.1,0,23.8,5.9,30.4,14.6l-11.5,9c-4.1-5.9-10.6-9.9-18.9-9.9c-13.6,0-23.3,10.6-23.3,24.4s10.2,24.4,24.3,24.4
C51.4,212.8,57.3,210.5,61.4,206.5z" />
<path d="M162.8,188.4c0,20.6-15.6,38.1-38.3,38.1c-22.8,0-38.4-17.5-38.4-38.1c0-20.6,15.6-38.1,38.4-38.1
C147.3,150.3,162.8,167.8,162.8,188.4z M147.8,188.4c0-13.8-9.7-24.4-23.2-24.4c-13.6,0-23.3,10.6-23.3,24.4s9.7,24.4,23.3,24.4
C138.1,212.8,147.8,202.2,147.8,188.4z" />
<path d="M218.7,152.3h14.6v43.9c0,19-11.1,30.3-29.3,30.3c-18,0-29.2-11.3-29.2-30.3v-43.9h14.6v45.2c0,9.7,5.5,15.4,14.6,15.4
c9,0,14.5-5.7,14.5-15.4V152.3z" />
<path d="M258.1,152.3l21.3,56.4l21.3-56.4h15.6L289,224.5h-19.2l-27.3-72.2H258.1z" />
<path d="M327.6,152.3h42.1v12.5h-27.4v16.7h23.3V194h-23.3v18h27.4v12.5h-42.1V152.3z" />
<path d="M386.8,152.3h22.1c15.9,0,25.7,8.1,25.7,21.5c0,8.7-4.2,15.2-11.5,18.7l22.7,32h-17.5l-19.2-29.2h-7.5v29.2h-14.6V152.3z
M401.4,164.8v18h8.2c6.2,0,9.8-3.3,9.8-9.2c0-5.5-3.6-8.9-9.8-8.9H401.4z" />
<path d="M454.8,152.3h18.8l32.3,51.7v-51.7h14.6v72.2h-18.8l-32.3-51.9v51.9h-14.6V152.3z" />
<path d="M540.8,152.3h42.1v12.5h-27.4v16.7h23.3V194h-23.3v18h27.4v12.5h-42.1V152.3z" />
<path d="M600,152.3h18.5l17.4,29.7l17.4-29.7h18.5v72.2h-14.6v-51.3L641,199.7h-10.3l-16.1-26.6v51.3H600V152.3z" />
<path d="M692,152.3H734v12.5h-27.4v16.7h23.3V194h-23.3v18H734v12.5H692V152.3z" />
<path d="M751.1,152.3h18.8l32.3,51.7v-51.7h14.6v72.2H798l-32.3-51.9v51.9h-14.6V152.3z" />
<path d="M829.7,152.3h59.2v13.3h-22.3v58.9H852v-58.9h-22.3V152.3z" />
</g>
</g>
<g>
<path class="st0" d="M100.5,89.9C100.6,89.9,100.6,89.9,100.5,89.9c0.4-0.2,0.6-0.3,0.8-0.5c0,0-0.1,0-0.1,0
C101,89.5,100.8,89.7,100.5,89.9" />
<path class="st0" d="M137.2,77.7l-0.2,0.2C137.1,77.9,137.2,77.8,137.2,77.7" />
<path class="st1" d="M125.6,90.5c1.1-1.1,2.2-2.2,3.2-3.4h0c2-2.3,4-4.4,6.3-6.4c0.7-0.6,1.4-1.2,2.1-1.6c0.2-0.2,0.2-0.6,0.4-0.8
c-0.9,0.4-1.5,1.1-2.5,1.5c-0.2,0-0.4-0.2-0.2-0.4c0.7-0.5,1.4-1,2-1.5c0,0-0.1,0-0.1,0c-0.2,0-0.2-0.2-0.2-0.4
c-2.5-0.4-4.3,1.3-6,2.8c-0.4,0.2-0.8-0.2-0.9-0.2c-2.8,0.9-4.9,3.4-7.7,4.5v-0.4c-1.1,0.4-2.2,1.1-3.4,1.3
c-1.7,0.4-3.2,0.2-4.7,0.2c-2.3,0.2-4.6,0.7-6.9,1.2c-0.1,0-0.1,0-0.2,0.1c-1.2,0.3-2.4,0.8-3.5,1.4l-0.1,0.1
c-0.1,0.1-0.2,0.2-0.3,0.3c-0.4,0.4-0.8,0.9-1.3,1.1c-1.2,0.6-2.1,1.6-3.1,2.5c-0.1,0.1-0.2,0.1-0.3,0.1c-1,1-2,2-3,2.9
c-0.1,0.1-0.4,0.1-0.6,0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.2c0.2-0.3,0.3-0.5,0.5-0.8c0.2-0.3,0.4-0.6,0.6-0.9
c0.3-0.4,0.5-0.8,0.8-1.1c0.1-0.1,0.1-0.2,0-0.2c-0.1-0.1-0.2-0.1-0.3-0.1c0.9-0.9,2.1-1.7,3.2-2.4v0c-0.1,0-0.3-0.1-0.2-0.2
c0.1-0.2,0.2-0.3,0.3-0.5c0-0.1,0-0.1,0.1-0.2c0-0.1-0.1-0.1-0.1-0.2c-0.3,0.2-0.6,0.4-0.9,0.6c-0.5,0.4-0.8,1.2-1.5,1.2
c0,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.2-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2
c0,0,0-0.1,0.1-0.1c0-0.1,0.1-0.2,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0.1-0.1,0.1-0.2
c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.2,0-0.3-0.1-0.3c0.3-0.5,0.8-0.8,1.3-1.1h-0.1c0.7-0.4,1.5-0.8,2.2-1.2c0.1-0.1,0.2-0.2,0.3-0.3
c-1.1,0.4-2,0.9-3,1.5c0,0-0.2,0.1-0.3,0.2c0,0-0.2,0.1-0.5-0.2c0,0,0-0.1,0-0.1c0.2-0.4,0.8-0.6,1.1-0.9c0.2,0,0.4,0,0.4,0.2
c6.1-4.7,14.4-3.6,21.4-6c0.6-0.4,1.1-0.8,1.7-1.1c0.9-0.4,1.7-1.3,2.8-1.9c1.5-1.1,2.6-2.5,3.2-4.3c0-0.2-0.2-0.4-0.2-0.4
c-2.5,2.6-5.3,4.7-8.3,6.2c-4,2.1-8.3,1.7-12.5,2.3c0.2-0.4,0.6-0.4,0.9-0.4c0-0.6,0.4-0.8,0.8-1.1h0.6c0.2,0,0.2-0.4,0.4-0.4
c0.4,0,1-0.2,0.8-0.2c-0.6-0.8-1.7,0.6-2.6,0c0.4-0.4,0.2-0.9,0.6-1.1h0.8c0-0.4,0.4-0.8,0.4-0.8c2.8-1.7,5.5-3,8.1-4.5
c-0.6,0-0.9,0.6-1.5,0.2c0.4,0,0-0.6,0.4-0.6c2.1-0.6,3.8-1.7,5.9-2.5c-0.8,0-1.3,0.6-2.1,0c0.4-0.2,0.6-0.6,1.1-0.6v-0.6
c0-0.2,0.2-0.2,0.4-0.2c-0.2,0-0.4-0.2-0.4-0.2c0.2-0.4,0.8-0.2,1.1-0.6c-0.2,0-0.6,0-0.6-0.2c0.6-0.8,1.5-0.9,2.5-1.1
c-0.2-0.4-0.8,0-0.8-0.4c0-0.2,0.2-0.2,0.4-0.2h-0.4c-0.4-0.2-0.2-0.6-0.2-0.8c1.1-1.3,1.1-3,1.7-4.5c-0.2,0-0.4,0-0.4-0.2
c-1.9,2.1-4.9,2.8-7.7,3.6H116c-0.9,0.4-2.3,0.4-3.2-0.2c-0.8-0.4-1.1-0.9-1.9-1.5c-1.5-0.9-3-1.7-4.7-2.3
c-4.7-1.5-9.6-2.3-14.5-2.1c2.1-1.1,4.4-1.2,6.6-1.9c3.2-0.9,6.2-2.1,9.6-1.9c-0.6-0.2-1.3,0-1.9,0c-2.6-0.2-5.3,0.6-8.1,1.1
c-1.9,0.4-3.6,1.1-5.5,1.5c-1.1,0.4-1.7,1.5-3,1.3v-0.6c1.9-2.3,4.2-4.5,7.2-4.7c3.4-0.6,6.6,0,10,0.4c2.5,0.2,4.7,0.8,7.2,1.3
c0.9,0,1.1,1.5,1.9,1.7c1.1,0.4,2.3,0,3.4,0.8c0-0.4-0.2-0.8,0-1.1c0.8-0.8,1.7,0.2,2.5-0.2c1.5-0.9-1.3-2.6-2.1-4
c0-0.2,0.2-0.4,0.2-0.4c1.5,1.3,2.6,2.8,4.5,3.8c0.9,0.4,3.2,0.9,2.8-0.2c-0.9-2.1-2.8-3.8-4.4-5.7v-0.8c-0.4,0-0.4-0.2-0.6-0.4
v-0.8c-0.8-0.4-0.6-1.1-0.9-1.7c-0.6-0.9-0.2-2.3-0.6-3.4c-0.4-1.1-0.6-2.1-0.8-3.2c-0.6-3.2-1.3-6-1.7-9.1
c-0.4-3.6,2.1-6.4,3.8-9.6c1.3-2.3,2.8-4.5,5.3-6c0.6-2.3,2.1-4.2,3.6-6c1.5-1.8,4-3,5.8-3.8c2.6-1.2,5-1.9,5-1.9H11.1v100h92.7
c3.6-2.6,7.2-3.8,12.2-6.3C118.4,94.8,123.8,92.3,125.6,90.5 M96.6,76.9c-0.4,0-1.1,0.2-0.9-0.2c0.2-0.9,1.5-0.9,2.3-1.3
c0.4-0.2,0.9-0.6,1.3-0.4c0.4,0.6,0.9,0.4,1.3,0.8C99.4,76.9,97.9,76.4,96.6,76.9 M67.6,72.8c0,0-0.2-0.2-0.2-0.4
c2.5-3.2,4.3-6.2,6.1-9.6c2.5-1.3,4.5-3.2,6.4-5.3c3.2-3.4,6.6-6.4,10.6-8.3c1.5-0.6,3.4-0.4,4.9,0.2c-0.6,0.8-1.5,0.6-2.3,1.1
c-0.2,0-0.4,0-0.6-0.2c0.2-0.2,0.2-0.4,0.2-0.6c-1.9,2.1-4.5,3-6,5.5c-1.1,1.9-1.9,4.3-4.3,4.9c-0.8,0.2,0.2-0.6-0.2-0.4
C76.3,63.3,72.2,67.7,67.6,72.8 M83.3,60.3c-0.2,0.4-0.4,0.4-0.6,0.8c-0.2,0.4-0.4,0.6-0.8,0.8c-0.2,0-0.4,0-0.4-0.2
c0.2-0.8,0.8-1.5,1.5-1.7C83.3,59.9,83.3,60.1,83.3,60.3 M92.1,88.6c-0.1,0.2-0.3,0.4-0.5,0.6c0.2,0,0.4,0.2,0.2,0.3
c-0.4,0.4-0.9,0.8-1.4,1c0,0-0.2,0-0.3,0c-0.2,0.2-0.5,0.4-0.7,0.7c-0.2,0.2-1.3,0.1-1-0.2c0.5-0.4,0.9-0.9,1.4-1.3
c0.3-0.2,0.6-0.5,0.8-0.8c0.1-0.2,0.2-0.3,0.4-0.4C91.3,88.3,92.3,88.2,92.1,88.6 M88.7,87.1C88.7,87.1,88.7,87.1,88.7,87.1
c-0.8,0.5-1.5,1-2.2,1.5c-0.8,0.5-1.7,0.8-2.5,1.2c0,0,0,0,0,0c-0.1-0.1-0.2-0.1-0.3-0.1c-0.7,0.4-1.3,0.9-1.9,1.5
c-0.1,0.1-0.2,0.2-0.3,0.3l0,0c0,0,0,0,0,0l-0.3,0.3c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0.1-0.3,0.3-0.4,0.4c-0.1,0.1-0.1,0.2-0.3,0.3
c-0.1,0.1-0.4,0.1-0.4-0.1c0,0,0,0,0,0c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.1-0.3,0.2c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
c-0.2,0.2-0.5,0.4-0.7,0.6c-0.4,0.4-0.8,0.7-1.1,1.2c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0,0,0,0,0
c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0c0,0-0.1,0.1-0.2,0.1c0,0-0.1-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1c-0.1-0.1-0.1-0.2-0.2-0.3
c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0.2-0.2,0.4-0.4,0.6-0.7c0,0,0,0,0,0c0.1-0.1,0.1-0.2,0.2-0.2c0.1-0.1,0.2-0.3,0.3-0.4
c0-0.1,0.1-0.1,0.1-0.2c0.2-0.3,0.4-0.5,0.6-0.8c0,0,0,0,0,0c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0.2-0.3,0.3-0.4
c0.1-0.1,0.1-0.2,0.2-0.4l0,0l0,0c0,0,0,0,0-0.1c0.1-0.2,0.1-0.3,0.2-0.4c0,0,0,0,0,0l0-0.1c0-0.1,0-0.1,0.1-0.2c0,0,0,0,0,0
c0-0.1,0-0.2,0.1-0.3c0,0,0-0.1,0-0.1c0.2-0.4,0.5-0.7,0.8-1c0,0-0.1,0-0.1,0c-0.3,0.2-0.5,0.4-0.7,0.6c-0.2,0.2-0.6-0.1-0.3-0.3
c0.2-0.1,0.3-0.3,0.4-0.4c0,0,0,0,0,0c0.3-0.3,0.6-0.7,1-1c0.2-0.2,0.4-0.3,0.6-0.4c0,0,0.1-0.1,0.1-0.1c0.1-0.2,0.3-0.3,0.4-0.5
c0,0,0,0,0,0c1.8-1.7,4.9-1.7,7.2-2.8c0.9-0.4,2.1,0.2,3,0c0.6,0,1.1,0,1.7,0.4C91.8,85,90.3,86.1,88.7,87.1 M92.6,73.9
c-0.2-0.2,0.6,0,0.8-0.4h-1.5c-0.2,0-0.2-0.2-0.2-0.4c-0.9,0.2-2.1,0.6-3,0.8c-1.3,0.4-2.5,1.3-4,1.7c-2.1,0.8-3.8,2.5-6,3.2
c-0.2,0-0.2-0.2-0.2-0.4c0.2-0.6,0.9-0.8,1.3-1.3c0-0.2,0-0.4-0.2-0.4c1.5-2.1,3.6-3.2,5.5-4.9v-0.6c0.6-0.8,1.5-1.1,1.9-2.1
c0.2-0.6,1-1.3,1.9-1.7c-0.2-0.2-0.6-0.2-0.6-0.6c-0.8,0-1.5,0.4-2.3-0.2c0.4-0.3,0.8-0.5,1.2-0.7c-0.2,0-0.3-0.1-0.4-0.3
c-0.2-0.4,0.4-0.8,0.9-0.9c0.8-0.2,1.7-0.2,2.3-0.8c-1.3-0.2-2.8,0.4-4.2-0.4c0.9-2.5,2.5-4.5,4.7-5.7c0.2,0,0.6,0,0.6,0.2
c0,0.9-0.6,1.7-1.5,1.9c1.5,0.4,3,0.4,4.5,1.1c-0.2,0.4-0.6,0.2-0.8,0.2c0.9,0.6,2.1,0.2,3,0.9c-0.6,0.6-1.1,0-1.7,0
c5.9,1.7,12.1,3,17,6.8c-4.2,2.1-8.5,3-13,4c-0.6,0-0.9,0-1.5-0.2c0,0.2,0,0.6-0.2,0.6c-0.8,0-1.3,0-1.9,0.4
C94.3,74.3,93.2,74.5,92.6,73.9" />
<path class="st2" d="M286.9,2.3H179.4c0,0,0.2,0,1,0.5c0.9,0.5,2,1.1,2.7,1.4c1.4,0.7,2.7,1.6,3.6,3c0.4,0.6,0.9,1.7,0.6,2.5
c-0.4,0.9-0.6,2.5-1.5,2.8c-1.1,0.6-2.6,0.6-4,0.4c-0.8,0-1.5-0.2-2.3-0.4c2.8,1.1,5.5,2.5,7.4,5.1c0.2,0.4,0.9,0.6,1.7,0.6
c0.2,0,0.2,0.4,0.2,0.6c-0.4,0.4-0.8,0.6-0.6,1.1h0.6c0.9-0.4,0.8-2.3,2.1-1.7c0.9,0.6,1.3,1.9,0.8,2.8c-0.8,0.8-1.5,1.3-2.3,1.9
c-0.2,0.4-0.2,0.9,0,1.3c0.6,0.8,0.8,1.5,0.9,2.3c0.6,1.3,0.8,2.8,1.3,4.2c0.8,2.8,1.5,5.7,1.3,8.5c0,1.5-0.8,2.8-0.2,4.3
c0.4,1.5,1.3,2.6,2.1,4c0.8,1.1,1.5,1.9,2.1,3c1.1,1.9,3.2,3.8,2.3,6c-0.6,1.3-2.6,1.1-4,1.9c-1.1,0.9-0.2,2.5,0.4,3.4
c0.9,1.7-1.1,2.8-2.5,3.4c0.4,0.6,1.1,0.4,1.3,0.8c0.2,0.9,1.1,1.5,0.6,2.5c-0.8,1.1-3,1.7-1.9,3.4c0.8,1.3,0.3,2.8-0.2,4.2
c-0.6,1.7-2.1,2.5-3.4,2.8c-1.1,0.4-2.5,0.4-3.6,0.2c-0.4-0.2-0.8-0.4-1.1-0.4c-3.2-0.4-6.4-1.3-9.6-1.3c-0.9,0.2-1.9,0.4-2.6,0.7
c-0.9,0.6-1.6,1.3-2.3,2c0,0,0,0,0,0c-0.1,0.2-0.3,0.3-0.4,0.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.1-0.2,0.2
c-0.6,0.7-1,1.4-1.5,2.2c0,0.1-0.1,0.1-0.1,0.1c0,0.1-0.1,0.2-0.2,0.3c-0.6,1.1-1.1,2.3-1.4,3.5c-1.3,4.3-0.7,8,0.2,8.9
c0.2,0.2,6.2,2.1,10.4,4c2,0.9,3.3,1.5,4.5,2.3h105.6V2.3z" />
<path class="st3" d="M185.8,38.7c0.8,0.2,1.9,0.2,1.9,0.6c-0.4,1.5-2.6,1.9-3.8,3.4h-0.6c-0.6,0.4-0.4,1.3-0.9,1.3
c-0.6-0.2-1.1,0-1.7,0.2c0.8,0.8,1.7,1.3,2.8,1.1c0.2,0,0.6,0.4,0.6,0.8c0,0,0.2,0,0.4-0.2c0.2,0,0.4,0,0.4,0.2v0.8
c-0.6,0.8-1.5,0.4-2.3,0.6c1.5,0.4,3,0.4,4.4,0c1.1-0.4,0-2.3,0.8-3.2c-0.4,0,0-0.6-0.4-0.6c0.4-0.4,0.8-0.9,1.1-1.1
c0.4,0,0.9-0.2,1.1-0.6c0-0.4-0.8-0.6-0.6-0.9c1.1-0.8,2.1-1.9,1.7-3c-0.2-0.6-1.7-0.6-2.6-1c-0.9-0.4-2.1,0-3.2,0.2
c-0.9,0-1.9,0.6-2.8,0.8c-1.3,0.4-2.5,1.1-3.6,1.9c1.3-0.6,2.6-0.8,4.1-1.1C183.7,38.7,184.6,38.5,185.8,38.7" />
<path d="M256.2,424.9c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7C250.8,428.4,253.8,424.9,256.2,424.9 M261.8,441.3h-2c-2.5,3-5.3,5.4-8,5.4
c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4c3.2-7.6-0.7-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3
c0,5.1,2.4,7.9,6.2,7.9C253.4,452.7,258,448.4,261.8,441.3 M259.2,416.9l9.3-8.5v-1.2h-6.2l-5.5,9.8H259.2z M224.3,425.1h5.4
l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.4-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4h-7.9l3-8.5h-3.1
l-5.6,8.5l-6.7,0.9V425.1z M218.7,423.9c0.7-2.2-0.8-3.4-1.9-3.4c-4.7,0-10.4,4.3-12.6,10.2h1.5c1.5-2.2,4.1-4.6,6.6-5l-9.1,23.6
c-0.8,2.2,0.8,3.4,2,3.4c4.5,0,9.8-4.3,12-10.2h-1.5c-1.5,2.2-4.1,4.6-6.6,5L218.7,423.9z M219.6,414.5c2,0,3.7-1.7,3.7-3.7
c0-2-1.7-3.7-3.7-3.7c-2.1,0-3.7,1.7-3.7,3.7C215.9,412.9,217.5,414.5,219.6,414.5 M175.7,427.1c1.4,0,2.2,2.2,0,7.1l-6.4,14.2
c-1.2,2.7,0.1,4.4,2.7,4.4c1.6,0,2.3-0.4,3-2.1l6.3-16.6c2.9-3.6,8.3-7.4,10.7-7.4c1.7,0,1.5,1.4,0.4,3.6l-9.7,18.5
c-0.9,1.8,0.3,4,2.4,4c4.7,0,10.4-4.3,12.6-10.2H196c-1.5,2.2-4.1,4.6-6.6,5l8.3-16.8c1.1-2.1,1.6-4.1,1.6-5.7
c0-2.7-1.5-4.5-4.4-4.5c-4.1,0-7.6,4.6-12.6,10.3v-4.4c0-3.1-1-5.9-3.8-5.9c-3.3,0-6.3,5.2-8.7,10.2h1.5
C173,428.4,174.5,427.1,175.7,427.1 M169.2,427.7c1.1-3.9,0.5-7.2-2.4-7.2c-3.7,0-4.9,2.5-8.5,10.3v-4.4c0-3.1-1-5.9-3.8-5.9
c-3.3,0-6.3,5.2-8.7,10.2h1.5c1.6-2.3,3.1-3.7,4.3-3.7c1.4,0,2.2,2.2,0,7.1l-6.4,14.2c-1.2,2.7,0.1,4.4,2.7,4.4
c1.6,0,2.3-0.4,3-2.1L157,434c1.8-2.2,3.4-4.1,5.4-6.2H169.2z M134.3,424.9c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7
C129,428.4,131.9,424.9,134.3,424.9 M139.9,441.3h-2c-2.5,3-5.3,5.4-8,5.4c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4
c3.2-7.6-0.6-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3c0,5.1,2.4,7.9,6.2,7.9C131.5,452.7,136.1,448.4,139.9,441.3 M102.4,425.1
h5.4l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.5-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4h-7.9l3-8.5h-3.1
l-5.6,8.5l-6.7,0.9V425.1z M73.7,443.5c0-7.3,8.1-17.2,12.7-17.2c1,0,2,0.1,2.8,0.4l-4.7,12.6c-2.7,3.3-6.9,7.3-8.9,7.3
C74.4,446.6,73.7,445.7,73.7,443.5 M98.6,419.1l-2.5-0.2l-2.8,2.8h-0.5c-11.9,0-24.7,14.8-24.7,26.5c0,2.7,1.5,4.5,4.4,4.5
c3.5,0,6.9-5,10.8-10.3l-0.2,1.9c-0.5,5.4,1.2,8.4,4,8.4c3.3,0,6.3-5.2,8.6-10.2h-1.5c-1.6,2.3-3.1,3.7-4.3,3.7
c-1.2,0-2.1-2.3,0-7.1L98.6,419.1z M73.1,427.7c1.1-3.9,0.5-7.2-2.4-7.2c-3.7,0-4.9,2.5-8.5,10.3v-4.4c0-3.1-1-5.9-3.9-5.9
c-3.3,0-6.3,5.2-8.6,10.2h1.5c1.6-2.3,3.1-3.7,4.3-3.7c1.4,0,2.2,2.2,0,7.1L49,448.4c-1.2,2.7,0.1,4.4,2.7,4.4
c1.6,0,2.3-0.4,3-2.1L61,434c1.8-2.2,3.4-4.1,5.4-6.2H73.1z M31.2,451.6l0.6-1.8c-7.9-1.5-8.9-1.5-5.7-10.1l3-8.1h6.3
c3.9,0,4,1.7,3.4,6h2.3l5.2-14.3h-2.3c-2,3.4-3.5,6-7.8,6h-6.3l4.3-11.7c1.5-4.2,2.2-5,7.6-5h1.4c5.5,0,6.2,1.5,6.2,7.3h2.2
l1.8-9.7H22.9l-0.6,1.8c6.3,1.3,6.9,1.9,4,10.1l-6.5,17.7c-3,8.1-4.2,8.8-11.5,10.1l-0.5,1.8H31.2z" />
<path d="M182.5,356c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7C177.1,359.5,180.1,356,182.5,356 M188.1,372.4h-2c-2.5,3-5.3,5.4-8,5.4
c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4c3.2-7.6-0.7-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3
c0,5.1,2.4,7.9,6.2,7.9C179.7,383.9,184.3,379.5,188.1,372.4 M185.5,348l9.3-8.5v-1.2h-6.2l-5.5,9.8H185.5z M150.6,356.2h5.4
l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.4-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4H163l3-8.5h-3.1
l-5.6,8.5l-6.7,1V356.2z M145,355.1c0.7-2.2-0.8-3.4-2-3.4c-4.7,0-10.4,4.3-12.6,10.2h1.5c1.5-2.2,4.1-4.6,6.6-5l-9.1,23.6
c-0.8,2.2,0.8,3.4,2,3.4c4.5,0,9.8-4.3,12-10.2h-1.5c-1.5,2.2-4.1,4.6-6.6,5L145,355.1z M145.9,345.7c2,0,3.7-1.7,3.7-3.7
c0-2-1.7-3.7-3.7-3.7c-2.1,0-3.7,1.7-3.7,3.7C142.2,344,143.8,345.7,145.9,345.7 M116.9,378.7l15-39.8l-0.5-0.7l-10.4,1.2v1.2
l2,1.5c1.8,1.4,1.2,2.7-0.4,7.2l-11.4,30.4c-1,1.8,0.3,4,2.4,4c4.7,0,9.8-4.3,12-10.2h-1.5C122.5,375.8,119.3,378.2,116.9,378.7
M86.3,374.6c0-7.3,8.1-17.2,12.7-17.2c1,0,1.9,0.1,2.8,0.4L97,370.4c-2.7,3.3-6.9,7.3-8.9,7.3C87,377.8,86.3,376.8,86.3,374.6
M111.2,350.3l-2.5-0.2l-2.8,2.8h-0.5c-11.9,0-24.7,14.8-24.7,26.5c0,2.7,1.5,4.5,4.4,4.5c3.5,0,6.9-5,10.8-10.3l-0.2,1.9
c-0.5,5.4,1.2,8.4,4,8.4c3.3,0,6.3-5.2,8.6-10.2h-1.5c-1.6,2.3-3.1,3.7-4.3,3.7c-1.2,0-2.1-2.3,0-7L111.2,350.3z M53.3,389.6
c0-3.1,3-5.1,7.3-6.8c1.4,0.7,3.6,1.5,6.4,2.4c4.5,1.5,6.2,2.1,6.2,3.4c0,2.9-4.1,5.1-11.6,5.1C56,393.8,53.3,392.6,53.3,389.6
M65.6,370.5c-2,0-2.7-1.7-2.7-3.6c0-5.9,2.8-13,7.3-13c2,0,2.7,1.7,2.7,3.6C72.9,363.3,70,370.5,65.6,370.5 M78.4,386.7
c0-3.8-3.4-5.2-8.9-6.8c-4.7-1.4-6.9-1.8-6.9-3.4c0-1.2,1-2.7,3-3.8c7.8-0.4,12.7-7.4,12.7-13.6c0-1.1-0.2-2.1-0.5-3h5.3l1-3.4h-9
c-1.2-0.8-2.7-1.2-4.4-1.2c-8.2,0-13.5,7.2-13.5,13.6c0,4.1,2.4,6.9,6.2,7.4c-3.8,1.8-6,3.7-6,6.1c0,1.4,0.5,2.4,1.7,3.3
c-8.8,2.6-12.4,5.9-12.4,9.7c0,4.1,5.4,5.8,11.8,5.8C69.3,397.5,78.4,391.6,78.4,386.7 M37.6,362.7c3.9,0,4,1.7,3.4,6h2.3
l5.2-14.3h-2.3c-2,3.4-3.5,6-7.8,6h-8.7l4.3-11.7c1.5-4.2,2.3-5,7.6-5h3.8c5.5,0,6.2,1.5,6.2,7.3h2.2l1.8-9.7H22.9l-0.6,1.8
c6.3,1.3,6.9,1.9,4,10.1l-6.5,17.7c-3,8.1-4.2,8.8-11.5,10.1l-0.5,1.8h36.4l6.5-10.3h-2.5c-4.2,4.2-8.5,7.9-16.6,7.9
c-9.7,0-8.8-0.5-5.6-9.5l3-8.1H37.6z M42.3,338.3l9.3-6.8v-1.2h-6.2l-5.5,8H42.3z" />
<path d="M181.3,287.2c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7C175.9,290.6,178.9,287.2,181.3,287.2 M186.9,303.6h-2c-2.5,3-5.3,5.4-8,5.4
c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4c3.2-7.6-0.7-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3
c0,5.1,2.4,7.9,6.2,7.9C178.5,315,183.1,310.7,186.9,303.6 M184.3,279.2l9.3-8.5v-1.2h-6.2l-5.5,9.8H184.3z M149.4,287.3h5.5
l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.5-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4h-7.9l3-8.5h-3.1
l-5.6,8.5l-6.7,0.9V287.3z M146.6,290c1.1-3.9,0.5-7.2-2.4-7.2c-3.7,0-4.9,2.5-8.5,10.3v-4.4c0-3.1-1-5.9-3.8-5.9
c-3.3,0-6.3,5.2-8.7,10.2h1.5c1.6-2.3,3.1-3.7,4.3-3.7c1.4,0,2.2,2.2,0,7.1l-6.4,14.2c-1.2,2.7,0.1,4.4,2.7,4.4
c1.6,0,2.3-0.4,3-2.1l6.3-16.6c1.8-2.2,3.4-4.1,5.4-6.2H146.6z M111.7,287.2c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7
C106.3,290.6,109.3,287.2,111.7,287.2 M117.3,303.6h-2c-2.5,3-5.3,5.4-8,5.4c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5
l16.4-5.4c3.2-7.6-0.6-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3c0,5.1,2.4,7.9,6.2,7.9C108.9,315,113.5,310.7,117.3,303.6
M79.1,310.2c-1.6,0-3.9-1.5-3.9-2.8c0-0.4,0.7-2.3,1.6-4.6l2.6-7c2.8-3.4,7.2-7.1,9.7-7.1c1.5,0,2.6,1,2.6,3.1
C91.6,298.4,85.6,310.2,79.1,310.2 M97.3,289.3c0-4.8-1.2-6.6-4.6-6.6c-4.2,0-8.1,4.5-12.1,9.9L89,270l-0.5-0.7l-10.4,1.2v1.2
l2,1.5c1.8,1.4,1.2,2.8-0.4,7.2l-9.1,23.9c-0.8,2-1.7,4.4-1.7,5c0,2.8,3.8,5.5,7.3,5.5C84.1,315,97.3,300.5,97.3,289.3
M66.6,286.2c0.6-2.2-0.8-3.4-2-3.4c-4.7,0-10.4,4.3-12.6,10.2h1.5c1.5-2.2,4.1-4.6,6.6-5l-9.1,23.6c-0.8,2.2,0.8,3.4,2,3.4
c4.5,0,9.8-4.3,12-10.2h-1.5c-1.5,2.2-4.1,4.6-6.6,5L66.6,286.2z M67.6,276.8c2,0,3.7-1.7,3.7-3.7c0-2-1.7-3.7-3.7-3.7
c-2.1,0-3.7,1.7-3.7,3.7C63.9,275.1,65.5,276.8,67.6,276.8 M44.5,272.3H22.9l-0.6,1.8c6.3,1.3,6.9,1.9,4,10.1l-6.5,17.7
c-3,8.1-4.2,8.8-11.5,10.1l-0.5,1.8h32.8l7.1-12.7h-2.5c-4.1,4.5-8.8,10.2-16.1,10.2c-5.5,0-6.3-1-3.2-9.5l6.5-17.7
c3-8.1,4.2-8.8,11.5-10.1L44.5,272.3z" />
</g>
</g>
</svg>
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image, SVG décoratif
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<!-- Les SVG illustratifs (non porteur de sens) doivent avoir l'attribut aria-hidden="true" -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
<rect width="360" height="360" fill="#f2f2f9" />
<path d="M200.667,145.977l44.471,70.069H155.207Z" fill="#bfbfe3" />
<path d="M149.342,173.226l-27.37,42.82h54.74Z" fill="#e5e5f4" />
<ellipse cx="162.05" cy="156.682" rx="6.843" ry="6.812" fill="#7f7fc8" />
</svg>
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image avec une transcription
<figure role="group" class="fr-content-media" aria-label="Description / Source">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-911">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-911">
<dialog id="fr-transcription__modal-transcription-911" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-911-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-911" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-911-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-911" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 16/9 par défaut
<figure role="group" class="fr-content-media">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-914">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-914">
<dialog id="fr-transcription__modal-transcription-914" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-914-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-914" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-914-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-914" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 16/9 par défaut, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-917">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-917">
<dialog id="fr-transcription__modal-transcription-917" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-917-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-917" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-917-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-917" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 16/9 par défaut, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-920">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-920">
<dialog id="fr-transcription__modal-transcription-920" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-920-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-920" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-920-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-920" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 4x3
<figure role="group" class="fr-content-media">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-4x3" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-923">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-923">
<dialog id="fr-transcription__modal-transcription-923" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-923-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-923" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-923-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-923" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 4x3, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-4x3" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-926">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-926">
<dialog id="fr-transcription__modal-transcription-926" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-926-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-926" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-926-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-926" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 4x3, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-4x3" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-929">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-929">
<dialog id="fr-transcription__modal-transcription-929" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-929-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-929" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-929-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-929" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 1x1
<figure role="group" class="fr-content-media">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-1x1" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-932">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-932">
<dialog id="fr-transcription__modal-transcription-932" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-932-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-932" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-932-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-932" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 1x1, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-1x1" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-935">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-935">
<dialog id="fr-transcription__modal-transcription-935" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-935-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-935" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-935-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-935" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 1x1, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-1x1" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-938">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-938">
<dialog id="fr-transcription__modal-transcription-938" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-938-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-938" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-938-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-938" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Dépréciation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Média video edito, ratio d‘aspect 16/9 par défaut
© Légende de la vidéo
<div class="fr-content-media">
<iframe title="Titre de l'iframe" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<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>
Média video edito, ratio d‘aspect 4/3
© Légende de la vidéo
<div class="fr-content-media">
<iframe title="Titre de l'iframe" class="fr-responsive-vid fr-responsive-vid--4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<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>
Média image edito, ratio d‘aspect 4/3
<figure class="fr-content-media" role="group" aria-label="© Légende de l‘image">
<div class="fr-content-media__img">
<img class="fr-responsive-img fr-responsive-img--4x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- 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 -->
</div>
<figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>