Problems:fullscreen Pseudo-class
04Easy

:fullscreen Pseudo-class

CSS

CSSFullscreen APIBrowser CompatibilityVideo

Context

The video component used `video:fullscreen { object-fit: contain }` to prevent cropping when users went fullscreen. Without it, the `cover` crop that looks great in the card view cuts off the top and bottom in fullscreen.

The Concept

The `:fullscreen` pseudo-class styles elements shown via the Fullscreen API. Safari still requires `:-webkit-full-screen`. Rules must be written separately — not comma-grouped — because unknown selectors invalidate an entire rule.

Task

Add two fullscreen rules below the base `video` styles: one using `video:fullscreen` and one using `video:-webkit-full-screen`. Both should set `object-fit: contain` so the full frame is visible without cropping.

styles.css
Hints0/3 revealed