Auto-Hide Overlay Media Player Navbar Block for React

It starts visible, so a keyboard user and the gallery see it. After your first move, key press or focus inside the player it fades out three seconds after the last of them (IDLE_MS). It never fades while focus is on one of its controls (the timer checks document.activeElement when it ends) or while a menu is open, and under reduced motion it never fades at all. Moving the pointer, pressing a key or focusing the player brings it back at once.

Yes: the fade is opacity only, so the controls stay in the tab order, and focusing one is itself a wake-up that shows the bar before you read it. Focus leaving the player starts the three seconds again.

Each is a menu of one radio group; choosing an item changes the label in the bar ("1080p"), the text drawn in the picture, and a hidden status says it ("Quality 1080p"). Enter, Space or the Down arrow opens a menu, the arrow keys move, Enter chooses and Escape closes it, returning focus to the button.

It calls the browser's Fullscreen API on the player and back out again; the button is pressed while the player fills the screen and is disabled where the browser has no Fullscreen API (some phones). Because the bar is part of the player, it stays on top of the picture in full screen.

So the block stays accessible in every theme: the scrim fades from the page's own background, so the title and icons keep their contrast whatever the picture behind them is. Replace Picture with your video element and keep the scrim; if your footage can be bright or dark, keep the scrim stronger than here.

The title and the caption line are hidden below sm, the wordmark shrinks to its icon and the two menus to their icons; the toggle and Fullscreen keep their size. There is no hover on a touch screen, so the bar wakes on a tap and fades three seconds later.