Split Layout Travel Video Hero Block for React

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

The page follows your theme, but a video frame is dark by nature, so only the player carries the dark class, and every token inside it takes the theme's dark values. Take the class off for a player that follows the page.

Edit PLAYBACK at the top of the file: elapsed and duration are the two times as shown, and percent is how far the scrubber's fill and thumb go. The control bar is always laid out left to right, even in right-to-left pages, as media controls are, and the thumb is placed with a logical offset.

The announcement link, the headline (the block's one h1), the paragraph and the two links. The player is a drawing: it's hidden from assistive technology and out of the tab order, so nobody lands on a control that does nothing.

The two columns stack below the lg breakpoint, the copy first, with the player under it and a rule between them. The player keeps its 16:9 shape, drops the itinerary card and uses a smaller play button below sm, and the Shine Button ends within the first screen, with nothing scrolling sideways down to 320 px.

The copy fades and rises in on load and the player scales in just after, with CSS transitions only. With reduced motion on, everything is simply there.