Teaser Video Within Modal A teaser about a video resource can trigger a video to be played in a modal.
Important Notes: Use the Video Thumbnail component as a teaser signifier. Only set up the image, do not make it interactive. Interactivity (triggering of the modal) should be handled via the headline’s link_attributes. Do not use time prop since it will conflict with the Video Thumbnail’s duration prop.
A Rock Climber
Video duration: 4:26

Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna.
{# Set up video thumbnail as image #}
{% set video_thumbnail %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'A Rock Climber',
        loading: 'lazy',
        width: 400,
        height: 300,
    } only %}
  {% endset %}
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      title: 'This is a Video Title',
      duration: '4:26',
  } only %}
{% endset %}

{# Pass video thumbnail as signifier, use link attributes to handle the trigger of modal #}
{% include '@bolt-components-teaser/teaser.twig' with {
  signifier: video_thumbnail,
  headline: {
    text: 'The signifier headline.',
    link_attributes: {
      type: 'button',
      'data-bolt-modal-target': '#' ~ modal_id,
  description: {
    content: 'Description.',
} only %}
Not available in plain HTML. Please use Twig.