Video Player Hero Block for React

Replace the title card inside the player's AspectRatio with an img of a frame from your product, or a muted, looping <video> with className="size-full object-cover". The AspectRatio keeps the 16:10 box while it loads. Change CLIP for the file name, the time and the timeline's position, and POSTER for the title card's words. A looping video is motion that never stops, so give it a visible pause button, outside the player, and don't autoplay it under reduced motion.

The player is a picture of your product, not a working player: nothing in it plays. So its whole cell is hidden from assistive technology (aria-hidden) and the window is taken out of the tab order (inert), and its buttons are drawn as icons, not buttons. A screen reader goes from the headline to the calls to action without stopping on controls that do nothing, and a keyboard user never lands on one. The headline is the page's one h1.

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

Remove aria-hidden from the cell and inert from the Frame, put your <video> in the AspectRatio and make the controls real buttons with names: a Button with size="icon-sm", variant="ghost" and an aria-label such as "Play", "Skip back 10 seconds" or "Mute". Drive Progress from the video's currentTime and duration, or use a Slider if the timeline should seek. For most products, the browser's own controls are the quicker, accessible choice.

The page follows your theme, but a video player is dark by nature, so only the Frame carries the dark class and an opaque bg-muted, so the theme's dark tokens apply inside it: bg-background, bg-muted, border and text-muted-foreground all resolve to their dark values, whatever the page's theme. Its border keeps it apart from a dark page. There are no fixed colours, and the play button and the timeline are the foreground tone, so the block's only primary colour is the Shine Button.

The player and the copy sit side by side from the lg breakpoint, and below it the copy comes first and the player under it, with a rule and + marks between them. Below sm the headline drops its forced line break and wraps, balanced. The player keeps its proportions at any width; the file name truncates if it's too long for the title bar.

Use the player when your product is the player, an editor, a streaming service or a recorder, and its interface is what you're selling. Use a video modal when you have a demo video to offer about any kind of product, played on request at full size.