Video thumbnail

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.

Video thumbnail

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.

Video thumbnail specs
Video thumbnail light theme
Video thumbnail dark 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.

Play button on light theme
Play button on dark theme

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.

Specs of video button thumbnail

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.


Don't reposition the play button.

Don't reposition play button

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

Don't change aspect ratio

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.


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

Video thumbnail centered

When centered, the video thumbnail and caption should span six grid columns

Video thumbnail sides

When aligned on the left or right edge of the grid, the video thumbnail and caption should span five grid columns

Mobile

Video thumbnail on mobile

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

Default

Video thumbnail default state

Focus

Video thumbnail focus state

Hover

Video thumbnail hover state

Active

Video thumbnail active state
Video thumbnail hover state light

The dark play button background becomes 25% darker on hover

Video thumbnail hover state dark

The light play button background becomes 25% lighter on hover


A video thumbnail uses PatternFly 4 spacers to define the spacing value between the thumbnail and the caption underneath.

Video thumbnail spacing specs

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.