Video Component

A CSS shell for a composable, accessible video player with a flexible control bar.

The video component is a CSS shell for building an accessible video player. It wraps a native <video> element and a composable video__controls bar containing icon buttons, time displays, a scrubber range input, and optionally anchored popovers (captions, volume, etc.).

All interactive behavior — play/pause toggling, scrubbing, popover open/close — is expected to be wired up in JavaScript. The CSS layer establishes layout and exposes the popover anchor pattern, along with overlay states ( video__overlay for loading and errors, video__play-overlay for the poster play button, video__nav for an overlay link).