When to use it

Use CardVideo when a page needs a clickable video thumbnail that links to an external video (YouTube, Vimeo, or a self-hosted URL). It signals video content through a play button overlay on the thumbnail image.

The component does not embed or play video inline. It links out to the video URL in a new tab. For inline video players, build a custom solution.

Composition notes

CardVideo is a simple prop-driven card:

• thumbnail is the preview image shown in the card.
• videoUrl is the destination link. When provided, the entire card becomes clickable.
• aspectRatio controls the thumbnail crop: 16:9 (default), 4:3, or 1:1.
• title and caption render below the thumbnail as text, same as CardImageWithCaption.

The play button overlay renders automatically on top of the thumbnail with a dark tint that darkens on hover.

Behavior and theming guidance

The thumbnail renders with object-cover inside the chosen aspect ratio. The play button is centered over the image with a semi-transparent dark overlay.

On hover, the overlay darkens further to give interactive feedback. If videoUrl is provided, the card wraps in an anchor that opens in a new tab (target="_blank").

Give the thumbnail a real alt value when it carries context beyond the visible title, and use the text below the card to make it clear where the click leads. Use 16:9 for standard video thumbnails, 4:3 for older-format content, and 1:1 for social-style video teasers.