Basic Video Thumbnail A video thumbnail is an image that displays a play icon and other relevant video information such as duration. Important Notes: Always provide a value for the video.title prop. This will provide contextual information for screen readers.The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail.Video thumbnail is a visual display with a built in button that can trigger a modal or play a video inline.The preferred method is to play videos within modals. View use caseIf required, a video can be played inline. View use caseThe content prop accepts both plain <img> element and Bolt Image element.video.duration prop is optional while recommended. Demo
A Rock Climber
Video duration: 4:55
Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/tout-4x3-climber.jpg',
      alt: 'A Rock Climber',
      background: true,
      loading: 'lazy',
      width: 400,
      height: 300,
    }
  } only %}
{% endset %}
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  video: {
    title: 'Title of the Video',
    duration: '4:55'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.