Video Thumbnail

A graphical element that represents a video.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with { content: image, 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
duration

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

 any —
  • —
video_title

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

 any —
  • —
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 —
  • —
Install Install npm install @bolt/components-video-thumbnail Dependencies @bolt/core-v3.x