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.

Color scheme

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

Modal

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.

Desktop, centered

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

Mobile

Interaction states

The only interactive element in a video thumbnail is the play button. For more information about modal interaction states, see Video player modal.

Default

Focus

Hover

Active

Spacing

A video thumbnail uses space tokens to define spacing values between elements.

Other libraries

To learn more about our other libraries, visit the getting started page.