Skip to contentShopify logoPolaris

Video thumbnail

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

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

import {MediaCard, VideoThumbnail} from '@shopify/polaris';
import React from 'react';

function VideoThumbnailExample() {
  return (
    <MediaCard
      title="Turn your side-project into a business"
      primaryAction={{
        content: 'Learn more',
        onAction: () => {},
      }}
      description={`In this course, you’ll learn how the Kular family turned their mom’s recipe book into a global business.`}
      popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
    >
      <VideoThumbnail
        videoLength={80}
        thumbnailUrl="https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850"
      />
    </MediaCard>
  );
}

Use to indicate the video’s play progress in relation to its duration.

import {MediaCard, VideoThumbnail} from '@shopify/polaris';
import React from 'react';

function VideoThumbnailExample() {
  return (
    <MediaCard
      title="Turn your side-project into a business"
      primaryAction={{
        content: 'Learn more',
        onAction: () => {},
      }}
      description={`In this course, you’ll learn how the Kular family turned their mom’s recipe book into a global business.`}
      popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
    >
      <VideoThumbnail
        videoLength={80}
        videoProgress={45}
        showVideoProgress
        thumbnailUrl="https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850"
      />
    </MediaCard>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface VideoThumbnailProps
thumbnailUrlstring

URL source for thumbnail image.

videoLength?number

Length of video in seconds.

Defaults to 0.

videoProgress?number

Video progress in seconds. Displays a progress bar at the bottom of the thumbnail. Only renders when videoLength is also set.

Defaults to 0.

showVideoProgress?boolean

Indicate whether to allow video progress to be displayed.

Defaults to false.

accessibilityLabel?string

Custom ARIA label for play button.

Defaults to 'Play video of length {human readable duration}'.

onClick() => void

Callback on click or keypress of thumbnail. Use to trigger render of the video player in your chosen format, for example within a modal or fullscreen container.

onBeforeStartPlaying?() => void

Callback on mouse enter, focus, or touch start of thumbnail. Use to trigger video preload.

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

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”.