padding-bottom百分比法最稳且兼容性最好，因其值按父宽计算（如56.25%即父宽×0.5625），自然撑出16:9高度；需配合position:relative父容器和absolute定位video，并设top:0;left:0;width:100%;height:100%;object-fit:cover。
直接用 padding-bottom 百分比是最稳、兼容性最好的方案，现代项目若只需支持 Chrome 98+ / Safari 15.4+ / Firefox 89+，可改用 aspect-ratio，但别在生产环境里混用两种逻辑。
为什么 padding-bottom 能锁住比例
因为 padding-bottom 的百分比值，是按父容器的 宽度 计算的，不是高度。比如设 padding-bottom: 56.25%，实际就是“父宽 × 0.5625”，这个值会随父宽缩放，自然就撑出了 16:9 的高度空间。
常见错误是写 height: 56.25%——它依赖父元素有显式 height，而响应式布局里父元素往往没设高度，结果就是塌陷或错位。
-
padding-bottom和padding-top效果等价，选哪个纯看习惯，但别混用（比如父层用padding-bottom，子层又用padding-top） - 必须给父容器设
position: relative，否则video的position: absolute会相对 body 定位 - 别给父容器设
height或min-height，否则会覆盖padding-bottom的占位效果
怎么算不同比例对应的 padding-bottom 值
别硬背数字，现场算更可靠：公式是 (height / width) * 100%。几个高频值可以直接记：
- 16:9 →
56.25%（9 ÷ 16 = 0.5625） - 4:3 →
75%（3 ÷ 4 = 0.75） - 1:1 →
100%（1 ÷ 1 = 1） - 9:16（竖屏）→
177.78%（16 ÷ 9 ≈ 1.7778）
注意：如果视频源本身是竖屏（如手机拍摄的 720×1280），用 object-fit: cover 会裁左右，object-fit: contain 会留上下黑边——这不是 CSS 算错了，是内容和容器比例不一致的必然结果。
video 标签本身的定位和渲染细节
父容器靠 padding-bottom 撑高，但 video 必须用 position: absolute 拉进去填满，否则它会按流式布局出现在 padding 上方，导致错位或只显示左上角一小块。
-
video必须设top: 0; left: 0; width: 100%; height: 100%，缺一不可 - Safari（尤其 iOS 15.3 及更早）对
object-fit支持不稳定，建议加background: #000防止未加载时露出空白 - 某些框架（如 Next.js、Remix）默认给
video加display: inline，需显式重置为display: block - 如果父容器有
border或padding，要确认box-sizing: border-box，否则padding-bottom的计算基准会被干扰
移动端和 iframe 场景下的特殊处理
这个技巧对 <iframe></iframe>（如 YouTube 嵌入）同样有效，结构和 CSS 几乎一样，只是把 video 换成 iframe。
真正容易被忽略的是 viewport 设置和容器宽度来源：
- 必须有
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端可能无视width: 100% - 如果父容器宽度来自 flex 或 grid，要确保它没被
min-width卡死；某些 UI 库（如 Ant Design）的Col组件默认有min-width: 0，可能影响padding-bottom的基准宽度 - iOS Safari 对
iframe的allowfullscreen和webkit-playsinline有额外要求，和比例控制无关，但常一起出问题
最麻烦的其实是嵌套：比如一个 .video-wrapper 放在 Modal 里，而 Modal 自身用了 transform 动画，这时 position: absolute 的 video 可能定位偏移——这种时候得检查 stacking context 和 transform 层级，不是 padding 本身的问题，但现象看起来像。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
