Hero Video Dialog: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add hero-video-dialog.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<HeroVideoDialog/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/hero-video-dialog.en.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

Hero Video Dialog