Video Modal Hero Block for React

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.

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.

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. The poster is the DialogTrigger itself, which renders the button.

Both are links to #: point them at your sign-up and your pricing. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

The dialog is uncontrolled, which is all a demo button needs. To control it, keep open in state and pass open and onOpenChange to Dialog; then another button, such as a "Watch the demo" link in your navigation, can open it too, and onOpenChange is where you'd record a play.

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.

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.