A Video thumbnail is a graphical preview of a video overlayed with a play button. When it’s selected, a video player modal will be displayed so a user can watch the video at a larger size.
A video thumbnail is a combination of a graphic with a slightly transparent play button on top. A video thumbnail can also include an optional caption underneath that explains what the video is.
A video thumbnail can include either a light or a dark play button, depending on the image underneath. If an image is lighter, use a dark play button for accessibility and vice versa.
A video thumbnail can be used to indicate that a video can be played and using a caption underneath isn’t required.
A video thumbnail can be used in most layouts that have enough space to accommodate a small image with a play button on top. A video thumbnail used in a card is a good example of a minimum size.
An optional descriptor caption can be placed underneath the video thumbnail, it can be left- or center-aligned, depending on how the video is oriented.
A caption should be limited to 150 characters.
Don't reposition the play button.
Don't change the aspect ratio of a video thumbnail.
When a video thumbnail is smaller than six columns, selecting the play button triggers a Video player modal where a larger version of the video will play on top of a background overlay.
When a video thumbnail is larger than six columns, the video will play inline on the page.
A video thumbnail changes size, but it should maintain its aspect ratio across all screen sizes. The caption also maintains the same text size, but changes alignment to match the video thumbnail.
When centered, the video thumbnail and caption should span six grid columns
When aligned on the left or right edge of the grid, the video thumbnail and caption should span five grid columns
The only interactive element in a video thumbnail is the play button. For more information about modal interaction states, see Video player modal.
The dark play button background becomes 25% darker on hover
The light play button background becomes 25% lighter on hover
A video thumbnail uses space tokens to define spacing values between elements.
Related elements or patterns
To give feedback about anything on this page, contact us.