// 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 %}