用 padding-top 百分比控制视频宽高比是因为其百分比基于父容器宽度计算，可锁定高度随宽度变化的比例；需设父容器 position: relative，子元素用 absolute 填满，padding-top 值=高÷宽×100（如16:9为56.25%）。
为什么用 padding-top 百分比控制视频宽高比
因为 padding-top 的百分比值是相对于父容器宽度计算的，这恰好能用来“锁定”高度随宽度变化的比例关系。而 height: 56.25% 这类写法在非绝对定位下无效——浏览器无法解析相对高度，会直接当 0 处理。
常见错误现象：height: 56.25% 不生效、视频被拉伸或裁剪、容器高度塌陷。
- 必须给父容器设
position: relative，否则子元素的absolute定位会脱离预期上下文 -
padding-top的数值 = 高度 ÷ 宽度 × 100（例如 16:9 → 9/16 = 0.5625 →56.25%） - 子元素（如
<iframe>或<video>）要用position: absolute填满整个 padding 留出的空间
标准 16:9 容器的最小可行代码
以下是最简结构，去掉任何多余样式也能稳定维持比例：
<div class="video-container">
<iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>
<p>.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /<em> 9/16 = 0.5625 </em>/
}
.video-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}注意：> * 保证所有直接子元素（无论 <iframe>、<video> 还是 <div> 包裹层）都能填满。
立即学习“前端免费学习笔记（深入）”；
适配不同比例时怎么算 padding-top
别硬记数字，现场算更快：
- 4:3 →
75%（3 ÷ 4 = 0.75） - 21:9（超宽屏）→
42.857%（9 ÷ 21 ≈ 0.42857） - 1:1（正方形）→
100% - 如果视频源本身带黑边（比如 4:3 视频嵌在 16:9 播放器里），优先按播放器容器比例算，不是源视频比例
别用 calc() 动态算这个值——它无法替代 padding 的流式响应逻辑，反而可能因四舍五入导致微小偏差。
嵌套布局或 flex/Grid 中的常见坑
当容器本身是 flex 项或 grid 子项时，width: 100% 可能不按你预期工作：
- Flex 容器默认
min-width: auto，会阻止子项收缩，需显式加min-width: 0到容器上 - Grid 中若父格子没设宽高，
padding-top仍会按网格轨道宽度计算，但容易因fit-content行为意外截断 - 不要给
.video-container设height，哪怕auto—— 它会覆盖 padding 生成的高度
最稳做法：把响应式容器当作独立布局单元，避免让它成为多层嵌套中“被挤压”的一环。
