video thumbnail docs

Video Thumbnail

A graphical element that represents a video.

Published Last updated: 5.3.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  video: {
    title: 'Video Title',
    duration: '4:55'
  }
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content

Content of the video thumbnail. An image pointing to the video poster is recommended.

any
border_radius

Set the border radius of the video thumbnail.

string none
  • none, small, large
aspect_ratio

Set the aspect ratio of the video thumbnail.

string 16:9
  • 1:1, 16:9, 4:3
chip

Display a chip (or chip-list) that overlays the video thumbnail. Positioned before the video title. Chip or Chip-list component is expected here.

any
button_attributes

A Drupal attributes object. Applies extra HTML attributes to the inner button element.

object
video

Props that pertain to the Brightcove video

object
    • content

      A Brightcove video that will display inside the video thumbnail container.

    • duration

      Display the video duration that overlays the video thumbnail. This should only be plain text.

    • has_subtitles

      Display a subtitles icon that overlays the video thumbnail.

    • title

      Video title data that is used within the internal button's aria-label and the optional video title chip.

    • show_title

      Display a video title chip that overlays the video thumbnail.

Install Install
npm install @bolt/components-video-thumbnail
Dependencies @bolt/core-v3.x

video thumbnail

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.

video thumbnail aspect ratio

Video Thumbnail Aspect Ratio Based on the use case, the aspect ratio of the thumbnail can be changed to fit a particular layout. Availalbe aspect ratios are: 1:1, 4:3, and 16:9. Important Notes: If you do not want the image to get cropped, make sure the source image has the same aspect ratio as the one you are using for the component. Demo
A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  aspect_ratio: '1:1',
  video: {
    title: 'Title of the Video',
    duration: '4:55'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Border Radius Border radius can be adjusted per use case. Demo
A Rock Climber
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  border_radius: 'large',
  video: {
    title: 'Title of the Video',
    duration: '4:55'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Title, Chips and Subtitles Title & Chips can be added or removed per use case. Important Notes: When using Chip alongside Title, please set its size as small, and its border_radius to match the Video Thumbnail’s border_radius. Demo
A Rock Climber
Preview This is a Video Title
Video duration: 4:26
Subtitles available
Twig
{% set chip %}
  {% include '@bolt-components-chip/chip.twig' with {
    text: 'Preview',
    size: 'small',
    border_radius: 'small',
    ...
  } only %}
{% endset %}
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  chip: chip,
  video: {
    title: 'This is a Video Title',
    duration: '4:26',
    has_subtitles: true,
    show_title: true
  }
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Modal Trigger A video thumbnail can be used as the trigger for a video modal. 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.Use the button_attributes prop to pass in the required data-bolt-modal-target attribute to hook up a modal.Refer to the Modal Documentation for more information. Demo
Twig
// 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 %}
HTML
Not available in plain HTML. Please use Twig.
Video Thumbnail Inline A video thumbnail can play a video inline if the video.content prop is used. Important Notes: Always provide a value for the video.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.Use the video.content prop to pass in the video object.The internal button in the video thumbnail will automatically play the video on click.The internal button will be replaced with the video after click. Demo
Twig
// Set up the video 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',
        ratio: false,
        background: true,
        loading: 'lazy',
      }
    } only %}
  {% endset %}
  {% set _video %}
    <video-js
      data-account='1900410236'
      data-player='O3FkeBiaDz'
      data-embed='default'
      data-video-id='4892122320001'
      controls
      class="c-base-video"></video-js>
  {% endset %}
  // Utilizing the 'video' prop will open the video inline
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: _image,
    video: {
      content: _video,
      duration: '4:55',
      title: 'Video Title',
      has_subtitles:  true
    }
  } only %}
{% endset %}
{{ video_thumbnail }}
HTML
Not available in plain HTML. Please use Twig.