Video
The video component contains a preview image that when clicked, is removed and a video is inserted in it's place.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/video.bundle.js
.video--constrained
Restrict max-width to 765px.
.video--16x9
Size the container correctly for a 16:9 aspect ratio. Note: The image source must also be a 16:9 aspect ratio.
{{ attach_library('h4h_theme/video') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<figure class="video {{ modifier_class }}">
<div class="video__img js-video">
<a class="video__link js-video-play" href="{{ video.external_url }}">
{{ icons.get('play', 'icon video__icon') }}
{{ img }}
</a>
<div class="video__iframe-container js-video-iframe" data-iframe-src="{{ video.url }}"></div>
</div>
{% if caption %}
<figcaption class="video__caption">
{{ caption }}
</figcaption>
{% endif %}
</figure>