Video Thumbnail Modal Trigger
A video thumbnail can be used as the trigger for a video modal.
Important Notes:
The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail.
Demo
Twig
// Set up the trigger
{% set video_thumbnail %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/tout-4x3-climber.jpg',
alt: 'A Rock Climber',
background: true,
loading: 'lazy',
}
} only %}
{% endset %}
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
duration: '4:55',
} only %}
{% endset %}
{% include '@bolt-components-trigger/trigger.twig' with {
content: video_thumbnail,
display: 'block',
attributes: {
'data-bolt-modal-target': '#js-modal-target',
}
} only %}
// Set up the modal
{% set video %}
{% set video_embed %}
<video-js
data-account='1900410236'
data-player='O3FkeBiaDz'
data-embed='default'
data-video-id='4892122320001'
controls
class="c-base-video"></video-js>
{% endset %}
{% include '@bolt-components-ratio/ratio.twig' with {
children: video_embed,
ratio: '16/9'
} only %}
{% endset %}
{% include '@bolt-components-modal/modal.twig' with {
content: video,
width: 'optimal',
spacing: 'none',
scroll: 'overall',
attributes: {
id: 'js-modal-target',
},
} only %}
HTML
Not available in plain HTML. Please use Twig.