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

When to use it

A training video about evidence review can play in a floating window while the learner reads a checklist. On the page, a status line still says how to return to the full player; script updates that line from the actual picture-in-picture events. CSS adds a subdued border to the video element while it is detached, which is an optional cue rather than the only explanation. Keep the caption and transcript links in the page UI, since not every floating player shows the same controls. Test entry, exit, failed request, browser denial, mobile behavior, and keyboard access to the original controls. Do not hide the original player or transcript when the pseudo-class matches: users may need to return to it. A permission policy or browser setting can prevent picture-in-picture even if this CSS parses. Video playback and detached-window behavior belong to browser and application code, not to the selector.

.training-video { display: block; max-inline-size: 100%; border: 2px solid #6b8490; }
@supports selector(:picture-in-picture) { .training-video:picture-in-picture { border-color: #235d77; outline: 2px solid #235d77; } }

Cost and verification

The styling cost is minor, but media playback and a second viewing surface have their own resource costs. Measure the video experience on target devices instead of assuming the selector changes decoding or bandwidth. Browser support for :picture-in-picture is limited, so the status line and transcript must work without it. The CSS rule cannot know whether a picture-in-picture request failed before entering the mode; event handling must report that result. Do not treat a visual border as evidence that the video is currently accessible in the separate window. Review captions in the floating player and keep the page transcript independently reachable.

Common Mistakes

• Do not expect CSS to start picture-in-picture mode.
• Do not place the only caption or transcript path in the floating window.
• Do not assume selector support means a request will succeed.

Connected lessons

• CSS Property Decisions
• CSS :fullscreen: lay out media after the browser enters full screen
• CSS @supports selector(): gate a relational selector safely
• HTML video tracks: expose controls and a caption file
• HTML video transcript: retain information beyond timed captions