v136 · css
Video Player HDR
The canonical use case for dynamic-range-limit: a video player where the player shell (controls, title bar) stays SDR (standard) while the video viewport uses high for full HDR brightness. Toggle between modes to see the difference, and inspect the generated CSS.
checking dynamic-range-limit…
The key insight:
dynamic-range-limit is inherited, so you can set standard on the player root and only override to high on the video viewport element. The controls, title, and chrome never go HDR — they stay legible even on bright HDR panels.
video: high · chrome: standard
Player demo
Mountain Sunrise — 4K HDR
HDR
0:23 / 1:04
Active CSS
The pattern
/* Player root: opt out of HDR — chrome stays SDR */
.player-chrome {
dynamic-range-limit: standard;
}
/* Video viewport: opt IN to full HDR */
.player-video-area {
dynamic-range-limit: high;
/* All content inside (canvas, img, video) can now go full HDR */
}
/* Controls inherit 'standard' from .player-chrome — no override needed */
.player-controls {
/* dynamic-range-limit: standard; ← already inherited */
}
/* Gallery variant: constrained-high for thumbnails, high on hover */
.thumbnail { dynamic-range-limit: constrained-high; }
.thumbnail:hover { dynamic-range-limit: high; }
/* Adaptive: use the continuous mix function for ambient dimming */
.video-area-dimmed {
dynamic-range-limit: dynamic-range-limit-mix(standard 30%, high 70%);
}