// Set up the thumbnail
{% 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,
    button_attributes: {
      'data-bolt-modal-target': '#js-modal-target'
    },
    video: {
      duration: '4:55',
      title: 'Video Title',
      has_subtitles: true
    }
  } only %}
{% endset %}

{{ video_thumbnail }}

// 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-elements-ratio/ratio.twig' with {
    content: video_embed,
    ratio: 'wide'
  } only %}
{% endset %}
{% include '@bolt-components-modal/modal.twig' with {
  content: video,
  width: 'optimal',
  spacing: 'none',
  scroll: 'overall',
  attributes: {
    id: 'js-modal-target',
  },
} only %}