<figure class="media media--full media--video">
<div class="media__inner-container">
<iframe class="media-youtube-player" title="This is a long caption, Eiusmod proident dolore ex dolore sint velit nostrud laboris do dolore sed excepteur anim exercitation sit et ut ex ut amet." src="//www.youtube.com/embed/Sagg08DrO5U?wmode=opaque&modestbranding=1&rel=0&showinfo=0&color=white&autohide=1"
frameborder="0" allowfullscreen></iframe>
</div>
<figcaption class="media-caption">
<p class="media-caption__text">This is a long caption, Eiusmod proident dolore ex dolore sint velit nostrud laboris do dolore sed excepteur anim exercitation sit et ut ex ut amet.</p>
<div class="media__transcript">
<a class=" link--download link--standalone" href="/">
Read the transcript <span class="file-size">[PDF ?? KB]</span>
</a>
</div>
</figcaption>
</figure>
// http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
// To be used when video is served inside an iframe, e.g. vimeo, youtube etc.
// Create a video wrapper div with zero height and a top padding set in percentages. That percentage will actually be a percentage of the width, making it maintain aspect ratio. T
// Then you absolutely position the video inside, targeting the iframe
// TODO - possibly replace with fitvid.js as works out aspect ratio of video on the fly
.video-wrapper,
.media-youtube-video,
.media--video .media__inner-container {
height: 0;
padding-bottom: $videoAspectRatio;
position: relative;
iframe {
height: 100%;
position: absolute;
width: 100%;
}
}
//from shame.css
.media-youtube-video,
.media--video .media__inner-container {
height: 0;
margin-bottom: 1.25rem;
padding-bottom: 56.25%;
position: relative;
}
/* stylelint-disable declaration-no-important */
.media-youtube-video iframe,
.media--video iframe {
bottom: 0;
height: 100% !important;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100% !important;
}
.media--video .media__inner-container {
margin: 0;
}
Shows a YouTube video with a caption and an optional transcript link.
Example usage: https://wellcome.ac.uk/about-us
You can use this up-to-date modular component by using the Video paragraph instead of a link to youtube in the WYSIWYG.
{
"caption": "This is a long caption, Eiusmod proident dolore ex dolore sint velit nostrud laboris do dolore sed excepteur anim exercitation sit et ut ex ut amet.",
"video_id": "Sagg08DrO5U",
"transcript": {
"url": "/",
"type": "PDF",
"size": "?? KB"
}
}