Percentage padding resolves against width — even vertically
The video placeholder needs to be 16:9 in a fluid column. height: 56.25% gave a box 0px tall. padding-top: 56.25% gave exactly the right height, which made no sense at all — 56.25% of what?
.frame is a video placeholder in a fluid column. It needs to be 16:9: 480×270 today, and still 16:9 when the column is 320px wide.
Its height has to be a consequence of its width. There are at least three honest ways to say that, and one of them is twenty years old and looks like nonsense until you know the rule it depends on.
The frame must not change height when the column gets *taller* — only when it gets *wider*.
Hint
One percentage in this problem resolves against the container's height and one resolves against its width. Which is which, and why would resolving a vertical padding against the height be impossible to define?
The fixture — markup and base stylesheet
You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.
<div class="col"><div class="frame"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; } .col { width: 480px; background: #0f0f14; } .frame { background: #7bdff2; }