Video Thumbnail

A graphical element that represents a video.

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