Split Layout Video Player Hero Block for React

Replace the Poster with a video that fills a 16:9 box (aspect-video size-full object-cover), with controls, a poster image for its first frame and a track of captions. Or embed a hosted player in an iframe with a title that names the video. Then remove aria-hidden and inert from the column: it's real content now, and its controls must be reachable.

It's part of the placeholder, so it's drawn rather than built: there's no video behind it yet. The whole column is hidden from screen readers and taken out of the tab order with inert, so nobody tabs onto a control that does nothing. The announcement link is the working way to the demo in the meantime. Once there's a video, use the player's own play button, or open it in a Dialog from a real button.

Edit CHAPTERS: each has a start, a length and a title, and the first is drawn as the one playing. With a real video, build the list from its chapter track and make each row a button that seeks to its start; while it's a drawing, the list is decoration. The deploy steps on the poster are STEPS and its log is LOG.

The announcement link, the headline (the block's one h1), the subtitle, the checklist and the two links, in that order. The checklist's ticks are hidden, so each item reads as plain text. The video column is decoration while it holds a placeholder, so it's skipped entirely.

The two columns stack below the lg breakpoint, the copy first, with the video and its chapters under a rule. The poster keeps its 16:9 shape at every width, the headline steps down from text-5xl to text-4xl, and the calls to action wrap when they don't fit side by side, so nothing scrolls sideways down to 320 px.

Use this split layout when the video is a main reason to stay on the page, so the preview sits in plain sight next to the pitch. Use a video modal hero when the headline should own the page and the video is one action among others, opened from a Watch button.