diff --git a/src/component/content/example/index.ejs b/src/component/content/example/index.ejs
index 5cad870bb..4b76cbaad 100755
--- a/src/component/content/example/index.ejs
+++ b/src/component/content/example/index.ejs
@@ -24,7 +24,7 @@
<%- sample('Média image, SVG décoratif', './sample/media-svg', { content: { illustration: true } }, true); %>
-<%- sample('Média image avec une transcription', './sample/media-img', { content: { img: { ratio:'2x3', src: '../../../example/img/placeholder-transcription.jpg', caption: getText('sample.img.caption', 'content'), link: getText('sample.img.link', 'content')}, transcription: { title: getText('sample.img.transcription.title', 'content'), content: getText('sample.img.transcription.content', 'content')}}}, true); %>
+<%- sample('Média image avec une transcription', './sample/media-img', { content: { img: { ratio:'2x3', src: '../../../example/img/placeholder-transcription.jpg', caption: getText('sample.img.caption', 'content'), alt: getText('sample.img.alternative', 'content'), link: getText('sample.img.link', 'content')}, transcription: { title: getText('sample.img.transcription.title', 'content'), content: getText('sample.img.transcription.content', 'content')}}}, true); %>
<%- sample('Média video edito, ratio d’aspect 16/9 par défaut', './sample/media-vid-default', { content: { transcription: true } }, true); %>
diff --git a/src/component/content/example/sample/media-vid-default.ejs b/src/component/content/example/sample/media-vid-default.ejs
index fe6448d66..560bc4719 100755
--- a/src/component/content/example/sample/media-vid-default.ejs
+++ b/src/component/content/example/sample/media-vid-default.ejs
@@ -2,7 +2,7 @@
const content = locals.content || {};
const data = {
vid: {
- ...vidData(null, null, content.ratio || null)},
+ ...vidData(null, getText('sample.video.title', 'content'), content.ratio || null)},
caption: 'Description / Source',
link: 'Label lien',
id: content.id || uniqueId('media'),
diff --git a/src/component/content/i18n/fr.yml b/src/component/content/i18n/fr.yml
index 11d50675f..b3cf28c6f 100644
--- a/src/component/content/i18n/fr.yml
+++ b/src/component/content/i18n/fr.yml
@@ -3,10 +3,12 @@ description: Les médias désignent vos contenus photos et vidéos. Lorsqu’ils
doc: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenu-medias
sample:
+ video:
+ title: 'Vidéo de présentation du Service National Universel - voir transcription ci-dessous'
img:
caption: © DILA 2020
link: 'vie-publique.fr'
- alternative: 'Planche 1 de la BD Simone Veil : la loi sur l’avortement. Épisode 2'
+ alternative: 'Planche 1 de la BD Simone Veil : la loi sur l’avortement. Épisode 2 - voir transcription ci-dessous'
transcription:
title: 'Simone Veil : la loi sur l’avortement'
content: 'Épisode 2 : une loi qui oppose
Synopsis : Dans un café, Louise discute avec sa mère de l’opposition virulente qu’a soulevée le projet de loi sur l’avortement défendu par Simone Veil lors des trois jours de débat à l’Assemblée nationale. Trois jours pendant lesquels les langues se sont déliées, pour le meilleur comme pour le pire.
Intérieur jour salon. Un père et ses quatre enfants sont assis, blottis les uns contre les autres, devant un poste de TV et regardent le discours de Simone Veil retransmis en direct.
26 novembre 1974.
SIMONE VEIL :
Aucune femme ne recourt de gaieté de cœur à l’avortement. Il suffit d’écouter les femmes.
Intérieur jour salon. Plan rapproché de la petite fille (la mère de Louise) serré contre son père, son ours en peluche dans les bras.
SIMONE VEIL :
C’est toujours un drame cela restera toujours un drame.
Intérieur jour café, Louise et sa mère, plan rapproché de celle-ci.
MÈRE :
Je ne me rappelle pas grand-chose de ce discours retransmis en direct, mais je me souviens très bien que nous étions tous les quatre avec mon père et mes frères et sœurs devant la télé.
Mon père a fondu en larmes juste après.
Intérieur jour café, Louise et sa mère.
MÈRE :
Il faut se rappeler les réactions suite à ce discours ! Simone Veil a souvent évoqué le « climat de passions » qui régnait. Pendant les trois jours de débats qui ont suivi, tout a été dit, même le pire.
Intérieur nuit Assemblée nationale. Plan rapproché sur Jean Foyer à la tribune.
Encart texte
26 novembre 1974. Les débats commencent à l’Assemblée nationale. Jean Foyer, député de la majorité de droite, est le premier opposant au projet à monter à la tribune.
JEAN FOYER :
Déjà des capitaux sont impatients de s’investir dans l’industrie de la mort, et le temps n’est pas loin où nous connaîtrons en France « ces avortoirs », ces abattoirs, où s’entassent des cadavres de petits hommes et que certains de mes collègues ont eu l’occasion de visiter à l’étranger.
Intérieur nuit Assemblée. Lucien Neuwirth à la tribune.
Encart texte
Lucien Neuwirth, député de la majorité qui avait défendu en 1967 le projet de loi sur la contraception, s’exprime.
LUCIEN NEUWIRTH :
… or chacun le sait, l’avortement n’est pas autre chose que l’issue extrême, l’alternative détestable d’une grossesse non désirée.
Il convient donc de s’attaquer à l’effet et non à la cause.
'
diff --git a/src/component/content/style/_module.scss b/src/component/content/style/_module.scss
index a3c09c248..270caa11d 100644
--- a/src/component/content/style/_module.scss
+++ b/src/component/content/style/_module.scss
@@ -30,7 +30,12 @@
}
#{ns(transcription)} {
- @include margin-top(3w);
+ @include margin-top(6v);
+ }
+
+ + #{ns(transcription)} {
+ @include margin-top(-4v);
+ @include margin-bottom(10v);
}
$medias: (#{&}__img, ns(responsive-vid));
diff --git a/src/component/content/template/ejs/media.ejs b/src/component/content/template/ejs/media.ejs
index 975345324..be5a98220 100644
--- a/src/component/content/template/ejs/media.ejs
+++ b/src/component/content/template/ejs/media.ejs
@@ -94,6 +94,7 @@ switch(type) {
<% } %>
<% } %>
+
<%
if (content.transcription != undefined) {
@@ -101,5 +102,3 @@ if (content.transcription != undefined) {
%>
<%- include('../../../transcription/template/ejs/transcription', {transcription: data}); %>
<% } %>
-
-