CSS :fullscreen: lay out media after the browser enters full screen

When to use it

A training player places a video, transcript link, and custom controls in one wrapper. Request full screen on that wrapper when the user presses its explicit button, then let CSS give the player a dark surface and fit the video within the available space. If the native video control enters full screen on the video element instead, a wrapper:fullscreen rule will not match; test both paths in the actual product. Keep caption text and the exit control visible, respect safe areas, and verify that Escape and the on-screen button leave full screen. Test pointer, keyboard, touch, orientation changes, a denied request, and a browser that does not support the chosen flow. The CSS cannot guarantee full-screen access or capture errors from the API. Do not use a fixed pixel height based on one laptop screenshot; the available viewport and browser controls vary. The transcript link remains useful outside full screen even when captions are present.

.training-player:fullscreen { display: grid; place-items: center; padding: 1rem; background: #081b26; color: #fff; }
.training-player:fullscreen video { max-inline-size: 100%; max-block-size: 85vh; }
.training-player:fullscreen :focus-visible { outline: 3px solid #f4c65f; outline-offset: 3px; }

Cost and verification

The selector has little cost. Large decoded video frames, overlays, and control updates dominate full-screen performance. An 85vh maximum is only a starting point; test captions, safe areas, and browser chrome on phones and tablets. A wrapper that contains controls can keep them in the full-screen element, while controls outside it may disappear from view. Full-screen activation and exit belong in application behavior, not CSS. Verify focus after entering and leaving, including the denial path, and do not hide the browser's own escape affordance. A full-screen paint change cannot repair missing captions or a broken video source.

Common Mistakes

• Do not expect :fullscreen to request full screen.
• Do not style a wrapper if the video element is the actual full-screen target.
• Do not let custom controls or captions become unreachable in full screen.

Connected lessons

• CSS Property Decisions
• CSS ::cue: improve caption contrast without editing the transcript
• CSS focus-visible: keep keyboard location unmistakable
• HTML video tracks: expose controls and a caption file
• HTML video playsinline: request inline playback without forcing autoplay

Related native states

• CSS :picture-in-picture: reflect detached video state without losing the page transcript