Hero Block Video Modal

Let users watch before they commit. This React hero block features a prominent play button over a thumbnail that opens a video in a sleek modal dialog. The video thumbnail has a gradient overlay and animated play button that pulses to draw attention. Built with shadcn/ui Dialog, Button, and Badge components. The modal supports both YouTube embeds and self-hosted videos with proper aspect ratio handling. On mobile, the play button scales down gracefully and the modal fills the screen. Perfect for product demos, course previews, testimonial videos, or any hero where video explains better than text.

Hero Block Video Modal preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/hero-21.json

npx shadcn@latest add https://www.shadcn.io/registry/hero-21.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/hero-21.json

bunx shadcn@latest add https://www.shadcn.io/registry/hero-21.json

Related Components

FAQ