Video Thumbnail
A graphical element that represents a video.
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
duration: '4:55',
} only %}| 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
|
|
|
aspect_ratio
|
Set the aspect ratio of the video thumbnail. |
string
|
16:9
|
|
|
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
| — |
|
npm install @bolt/components-video-thumbnailcontent prop accepts both plain <img> element and Bolt Image component.ratio prop must be set to false and cover prop set to true.duration prop is optional while recommended.
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
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
Video duration: 4:55
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
duration: '4:55',
border_radius: 'large',
} only %}HTML
size as small, and its border_radius to match the Video Thumbnail’s border_radius.
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
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