video thumbnail docs

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

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: Video thumbnail is a graphical element, it is not an interactive element. Interactions should be handled via links and buttons. It is commonly used as a trigger for video modals. View use case The content prop accepts both plain <img> element and Bolt Image component. When passing the Bolt Image component, ratio prop must be set to false and cover prop set to true. 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, 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', duration: '4:55', } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail border radius

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, duration: '4:55', border_radius: 'large', } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail title and chips

Video Thumbnail Title & Chips 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
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 { video_title: 'This is a Video Title', chip: chip, ... } only %}
HTML
Not available in plain HTML. Please use Twig.

video thumbnail use case modal

Video Thumbnail Modal Trigger A video thumbnail can be used as the trigger for a video modal. Important Notes: The video poster image from a particular Brightcove video is recommended to be used as the video thumbnail. Demo
Twig
// Set up the trigger {% 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, duration: '4:55', } only %} {% endset %} {% include '@bolt-components-trigger/trigger.twig' with { content: video_thumbnail, display: 'block', attributes: { 'data-bolt-modal-target': '#js-modal-target', } } only %} // 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-components-ratio/ratio.twig' with { children: video_embed, ratio: '16/9' } 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.