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', loading: 'lazy', width: 400, height: 300, } } 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.