35-card-replacement-with-video.twig

{% set video_uuid1 = 'video-1' %}
{% set video_uuid2 = 'video-2' %}
{% set video_uuid3 = 'video-3' %}
{% set video_uuid4 = 'video-4' %}

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

{% set video_thumbnail_1 %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="3974147489001"
      id="{{ video_uuid1 }}"
      data-media-title
      data-media-duration
      controls
      class="c-base-video"></video-js>
  {% endset %}

  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      content: video,
      title: 'Video Thumbnail with action play',
      duration: '4:26',
      has_captions: true,
      show_title: true
    }
  } only %}
{% endset %}

{% set video_thumbnail_2 %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="3974147489001"
      id="{{ video_uuid2 }}"
      data-media-title
      data-media-duration
      controls
      class="c-base-video"></video-js>
  {% endset %}

  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      content: video,
      title: 'Video Thumbnail without action play',
      duration: '4:26',
      has_captions: true,
      show_title: true
    }
  } only %}
{% endset %}

{% set video_thumbnail_3 %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="3974147489001"
      id="{{ video_uuid3 }}"
      data-media-title
      data-media-duration
      controls
      class="c-base-video"></video-js>
  {% endset %}

  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      content: video,
      title: 'Video Thumbnail with whole card clickablity',
      duration: '4:26',
      has_captions: true,
      show_title: true
    }
  } only %}
{% endset %}

{% set video_thumbnail_4 %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="3974147489001"
      id="{{ video_uuid4 }}"
      data-media-title
      data-media-duration
      controls
      class="c-base-video"></video-js>
  {% endset %}

  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      content: video,
      title: 'Video Thumbnail triggered by whole card clickablity',
      duration: '4:26',
      has_captions: true,
      show_title: true
    }
  } only %}
{% endset %}

{% set card_1 %}
  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
    tag: 'article',
    media: {
      video: video_thumbnail_1
    },
    body: {
      headline: 'Video Thumbnail with action play',
      paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video play button and the card\'s action button will play/pause the video.',
    },
    actions: [
      {
        text: 'Play or Pause',
        attributes: {
          'data-video-target': video_uuid1,
          class: 'js-base-video-toggle'
        }
      },
    ],
  } only %}
{% endset %}

{% set card_2 %}
  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
    tag: 'article',
    media: {
      video: video_thumbnail_2
    },
    body: {
      headline: 'Video Thumbnail without action play',
      paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video\'s play button will play/pause the video.',
    }
  } only %}
{% endset %}

{% set card_3 %}
  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
    tag: 'article',
    link: {
      url: 'https://google.com',
      text: 'Go to google.com'
    },
    media: {
      video: video_thumbnail_3
    },
    body: {
      headline: 'Video Thumbnail with whole card clickablity',
      paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video and the card\'s action button will play/pause the video and the whole card clickability will go to a URL path.',
    },
    actions: [
      {
        text: 'Play or Pause',
        attributes: {
          'data-video-target': video_uuid3,
          class: 'js-base-video-toggle'
        }
      },
    ],
  } only %}
{% endset %}

{% set card_4 %}
  {% include '@bolt-components-card-replacement/card-replacement.twig' with {
    tag: 'article',
    link: {
      url: '#',
      attributes: {
        'aria-label': 'Play the Video Thumbnail in Card whole Card Clickablity Video',
        'data-video-target': video_uuid4,
        class: 'js-base-video-toggle'
      }
    },
    media: {
      video: video_thumbnail_4
    },
    body: {
      headline: 'Video Thumbnail triggered by whole card clickablity',
      paragraph: 'The Video Thumbnail with an inline video (video object passed into the video.content prop) is passed in to the card\'s media.video prop. The video will play/pause when the whole card is clicked',
    }
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: card_1
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: card_2
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: card_3
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: card_4
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    'thirds@from-small',
  ],
} only %}