Video Thumbnail

A graphical element that represents a video.

Published Last updated: 5.6.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