Video thumbnail
Video thumbnails are a clickable placeholder image. When clicked, it opens a video player within a modal or full screen.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
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.
Related components
- To present a small visual anchor for an object, use the thumbnail 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”.