CSSintrobaseline-2022
The aspect-ratio property
Reserve the shape, not just the size.
Before aspect-ratio, holding a box at 16:9 meant the padding-top percentage hack. One property now states the ratio directly — and the box keeps it as it flexes.
A 16:9 video frame
HTML+CSS+JSintro Press Run to execute
The .player div takes its width from the 480px-capped figure and derives its height from aspect-ratio: 16 / 9, so the play button sits centred in a wide 16:9 frame with no padding hack or fixed pixel height. Resize the frame and the box keeps the same shape because only one dimension is pinned.