Bolt Design System

Twig Usage

{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
  content: image,
  video: {
    title: 'Video Title',
    duration: '4:55'
  }
} only %}

Schema

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. — `has_captions` Display a captions 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

npm install @bolt/components-video-thumbnail

Dependencies

@bolt/core

Video Thumbnail

A graphical element that represents a video.