shadcn.io is not affiliated with official shadcn/ui
Video Modal Hero Block for React Aria
A showcase hero with a centered headline over a wide 16:9 video poster drawn from the product's UI, in a hairline frame, whose play button opens the demo in a dialog.
Installation
Overview
Let visitors watch the product without leaving the page. An announcement pill, a two-line headline, a sentence, a Shine Button and an outline button sit above a full-width 16:9 poster in a hairline frame with + marks on its corners. The poster isn't a grey box: it's the product's weekly rota drawn in greyscale, with one shift selected, under a large play button and the video's length in the corner. Pressing it opens a dialog with the video's title, a one-line description and the player's frame, ready for your video. Nothing plays until the visitor asks for it. The block follows your theme; only the player frame inside the dialog is dark, as video is. It's built from Dialog, Aspect Ratio, Grid Pattern, Badge, Announcement, Status, Shine Button, Button and Guides, with Lucide icons, Tailwind CSS and a CSS entrance that stays still under reduced motion. Made for product launches, SaaS homepages and demo pages, where a short walkthrough explains more than a paragraph.
FAQ
How do I put my video in the dialog?
Replace the AspectRatio under the dialog's header (the grid, the play mark and the transport bar) with your player, and remove its aria-hidden. For a file you host, use a <video controls> with className="size-full" inside the AspectRatio, a <track kind="captions"> for the captions, and autoPlay, since the visitor already asked for it. For YouTube or Vimeo, use their embed iframe with className="size-full", allow="autoplay; fullscreen" and a title naming the video. The player only mounts while the dialog is open, so closing it stops the video. The frame carries the dark class on purpose: a video is dark whatever the theme, and the dialog around it follows the theme.
How do I show a frame of the video as the poster?
Replace RotaPoster with an img of a frame from your video, with className="absolute inset-0 size-full object-cover" and alt="": the play button already names the video, so the image needn't be read twice. The AspectRatio keeps the 16:9 box while the image loads, and the play button and the length stay on top of it. Change VIDEO.duration to your video's length. To keep the drawing, edit ROTA at the top of the file.
How do keyboard and screen reader users open and close the video?
The whole poster is one button, named "Play the video: Rotawise in two minutes, 2:14", reached with Tab and pressed with Enter or Space; the drawing inside it is hidden from assistive technology. The dialog moves focus inside, keeps it there and is named by its visible title, with the description read after it. Escape, the close button or a click outside closes it, and focus returns to the poster. The headline is the page's one h1.
On React Aria, the poster is React Aria's own Button inside DialogTrigger, which opens the Dialog next to it.
Where do the two buttons link to?
Both are links to #: point them at your sign-up and your pricing.
On React Aria, each button takes the link's href and renders an a.
How do I open the dialog from somewhere else, or know when it opens?
The dialog is uncontrolled, which is all a demo button needs.
To control it, keep isOpen in state and pass isOpen and onOpenChange to DialogTrigger; then another button can open it too, and onOpenChange is where you'd record a play.
How does the hero fit on a phone?
Below the sm breakpoint the headline wraps, balanced, at text-4xl, and the two buttons wrap onto a second line if they don't fit on one. The poster keeps its 16:9 shape at any width, with a smaller play button, and the drawing inside it shrinks with it, down to the initials of each person. The dialog stays centered with a margin on each side, rather than sliding up from the bottom, so the video keeps its shape.
When should I use a video modal instead of an inline video?
Use a modal when the video is optional: the page loads light, nothing plays until the visitor chooses to, and the video gets the whole screen when it does. Use an inline player when the video is the main content and should be in view, playing or ready, as soon as the page loads.