用 padding-top 控制视频容器比例是因为其百分比基于父宽计算，可锁定宽高比；height 百分比则需父元素有明确高度，否则塌陷。
为什么用 padding-top 做视频容器比例控制
因为 height 在响应式场景下无法直接设为百分比（除非父元素有明确高度），而 padding 的百分比值是相对于父元素宽度计算的——这刚好能锁定宽高比。比如 padding-top: 56.25% 对应 16:9（9 ÷ 16 = 0.5625）。
常见错误是直接写 height: 56.25%，结果容器高度塌陷，视频溢出或拉伸变形。
- 必须给容器设
position: relative，否则子元素的position: absolute会脱离预期布局流 -
padding-top只能用在块级元素上，inline元素不生效 - 如果容器本身有
border或margin，要额外考虑是否影响整体尺寸，建议用box-sizing: border-box
iframe 或 video 标签怎么塞进这个容器里
子元素得用绝对定位填满 padding 撑开的空间，否则它会另起一行或只占内容区。
典型写法：
立即学习“前端免费学习笔记（深入）”；
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.video-container > iframe,
.video-container > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}- 务必限制子元素的
width和height都为100%，只设一个会导致拉伸 - 如果视频源本身带黑边（如 4:3 视频放在 16:9 容器），需加
object-fit: cover（video）或frameborder="0"（旧版iframe）避免默认边框 - 移动端 Safari 对
iframe的allowfullscreen有严格要求，记得加上
不同比例怎么算 padding-top 值
公式就是：目标高度 ÷ 目标宽度 × 100%，结果保留两位小数即可。
- 4:3 →
padding-top: 75%（3 ÷ 4 = 0.75） - 21:9（超宽屏）→
padding-top: 42.86%（9 ÷ 21 ≈ 0.4286） - 1:1（正方形）→
padding-top: 100% - 如果用 CSS 自定义属性动态改比例，注意
calc()不能直接在padding-top里做除法运算，得预计算好
和 aspect-ratio 对比有什么坑
aspect-ratio 看起来更直白，但兼容性差：Chrome 88+、Firefox 89+、Safari 15.4+ 才稳定支持；IE 完全不认。线上项目仍需 fallback 到 padding 方案。
- 即使用了
aspect-ratio，也建议保留padding-top声明作降级，CSS 会自然覆盖 -
aspect-ratio对iframe生效的前提是它被设为块级（display: block），否则可能无效 - 某些 CMS 输出的
iframe会自带width/height行内样式，强行覆盖 CSS，得用!important或 JS 清除
真正麻烦的不是算比例，而是视频加载后尺寸重排导致的布局抖动——如果容器没预留空间，首屏会出现跳动。padding 占位法从一开始就撑开了空间，这点比纯 JS 计算可靠得多。
