Video thumbnail

Overview

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.

Sample pattern

Style

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.

Theme

Button

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.

Usage

A video thumbnail can be used to indicate that a video can be played and using a caption underneath isn’t required.

Layouts

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.

Caption

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.

Character counts

A caption should be limited to 150 characters.

Best practices

Don't reposition the play button.

Don't change the aspect ratio of a video thumbnail.

Behavior

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.

Inline

When a video thumbnail is larger than six columns, the video will play inline on the page.

Responsive design

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.