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
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.
