Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
Hero Block Video Modal
Hero block with play button that opens video in a modal dialog
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
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.
See how it works in 2 minutes
Watch our quick demo to see how easy it is to get started. No signup required—just press play.
Trusted by 10,000+ teams worldwide
Installation
Related blocks you will also like
Hero Block Video Background
Hero with background video
Hero Block Product Screenshot
Hero with app screenshot
Hero Block Image Gallery
Hero with image gallery
Hero Block Comparison
Hero with before/after slider