Video thumbnail

    Video thumbnails are a clickable placeholder image. When clicked, it opens a video player within a modal or full screen.

    Examples

    Down Arrow

    Use as a play button for a video player within a media card.


    Best practices

    Video thumbnails should:

    • Be used with a media card
    • Use an image that communicates the subject of the video
    • Include a video timestamp
    • Capture an image from the video to give a preview of the video content
    • Be cropped to a 16:9 aspect ratio
    • Be centered on the subject and avoid cropping of important details, like a person’s head

    Required components

    • The video thumbnail should be wrapped in the media card component.


    Accessibility

    See Material Design and development documentation about accessibility for Android:

    See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

    Images included in video thumbnails are implemented as decorative background images so that they’re skipped by screen readers.

    The play button is keyboard accessible and the aria-label includes a timestamp when the videoLength prop is set. For example, an 80 second video reads as “Play video of length 1 minute and 20 seconds”. If no videoLength prop is provided, the default label reads “Play video”.