Video Thumbnail
A graphical element that represents a video.
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
video: {
title: 'Video Title',
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
|
|
|
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
| — |
|
npm install @bolt/components-video-thumbnailvideo.title prop. This will provide contextual information for screen readers.content prop accepts both plain <img> element and Bolt Image element.video.duration prop is optional while recommended.
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,
video: {
title: 'Title of the Video',
duration: '4:55'
}
} only %}HTML
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
aspect_ratio: '1:1',
video: {
title: 'Title of the Video',
duration: '4:55'
}
} only %}HTML
Twig
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: image,
border_radius: 'large',
video: {
title: 'Title of the Video',
duration: '4:55'
}
} 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 {
chip: chip,
video: {
title: 'This is a Video Title',
duration: '4:26',
has_subtitles: true,
show_title: true
}
...
} only %}HTML
video.title prop. This will provide contextual information for screen readers.button_attributes prop to pass in the required data-bolt-modal-target attribute to hook up a modal.Twig
// Set up the thumbnail
{% 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,
button_attributes: {
'data-bolt-modal-target': '#js-modal-target'
},
video: {
duration: '4:55',
title: 'Video Title',
has_subtitles: true
}
} only %}
{% endset %}
{{ video_thumbnail }}
// 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-elements-ratio/ratio.twig' with {
content: video_embed,
ratio: 'wide'
} only %}
{% endset %}
{% include '@bolt-components-modal/modal.twig' with {
content: video,
width: 'optimal',
spacing: 'none',
scroll: 'overall',
attributes: {
id: 'js-modal-target',
},
} only %}HTML
video.content prop is used.
video.video_title prop. This will provide contextual information for screen readers.video.content prop to pass in the video object.Twig
// Set up the video thumbnail
{% set video_thumbnail %}
{% set _image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/tout-4x3-climber.jpg',
alt: 'A Rock Climber',
ratio: false,
background: true,
loading: 'lazy',
}
} only %}
{% endset %}
{% set _video %}
<video-js
data-account='1900410236'
data-player='O3FkeBiaDz'
data-embed='default'
data-video-id='4892122320001'
controls
class="c-base-video"></video-js>
{% endset %}
// Utilizing the 'video' prop will open the video inline
{% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
content: _image,
video: {
content: _video,
duration: '4:55',
title: 'Video Title',
has_subtitles: true
}
} only %}
{% endset %}
{{ video_thumbnail }}HTML
video.content or button_attributes props.Twig
{% 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
} only %}
{% endset %}
<a href="https://google.com" target="_blank" rel="noopener" aria-label="Link to Video Resource">
{{ video_thumbnail }}
</a>HTML