Hero Video Dialog

A click-to-play hero video dialog with a thumbnail, a pulsing play button, and a range of enter and exit animations.

Click the thumbnail to play the video in a dialog. It supports a range of enter and exit animations, a blurred backdrop, closing with Escape or by clicking the overlay, and locks background scrolling.

Loading preview…

npx shadcn@latest add https://webberui.com/r/hero-video-dialog.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Animation styleanimationStyle

Video URLvideoSrc

Thumbnail URLthumbnailSrc

<HeroVideoDialog />

Installation

npx shadcn@latest add https://webberui.com/r/hero-video-dialog.json

Or, once registries are configured in components.json, install it as @webberui/hero-video-dialog.

Usage

videoSrc is embedded in an iframe by default, which suits YouTube, Vimeo, and other embed URLs; thumbnailSrc is yours to supply.

import { HeroVideoDialog } from "@/components/ui/hero-video-dialog";

<HeroVideoDialog
  videoSrc="https://www.youtube.com/embed/VIDEO_ID"
  thumbnailSrc="/thumbnail.jpg"
  thumbnailAlt="Product overview"
  animationStyle="from-center"
/>;

To drop in your own player or entirely self-contained content, use children instead of the default iframe:

<HeroVideoDialog thumbnailSrc="/thumbnail.jpg">
  <video src="/demo.mp4" controls autoPlay className="h-full w-full" />
</HeroVideoDialog>;

Animation styles

animationStyle accepts: from-center, from-bottom, from-top, from-left, from-right, fade, top-in-bottom-out, and left-in-right-out.

Props

Prop	Type	Default	Description
`videoSrc`	`string`	—	Video URL, embedded in an `iframe` by default
`thumbnailSrc`	`string`	—	Thumbnail URL; when not provided, the built-in gradient placeholder is shown
`thumbnailAlt`	`string`	`"Video thumbnail"`	Alternative text for the thumbnail, also used as the dialog's label
`animationStyle`	`HeroVideoAnimationStyle`	`"from-center"`	Enter and exit animation style for the dialog
`playButtonLabel`	`string`	`"Play video"`	Accessible label for the play button
`children`	`ReactNode`	—	Custom dialog content; when provided, it replaces the default `iframe`
`className`	`string`	—	Styles forwarded to the thumbnail frame

Accessibility

The thumbnail is a button with an aria-label and a visible keyboard focus ring
The dialog is a role="dialog" with aria-modal, and can be closed with Escape or by clicking the overlay
Background scrolling is locked while it is open and restored once it closes
When the user has "reduce motion" enabled, it is presented with a fade in and out only, and the play button's pulse is disabled