用 padding-bottom 百分比实现响应式视频容器必须同时满足三个条件：父容器设 position: relative、height: 0，并用 padding-bottom（基于宽度计算）撑高；否则容器会塌陷或比例失真。
直接用 padding-bottom 百分比就能做出稳定响应式视频容器，关键不是“怎么写”，而是“为什么必须这么写”——漏掉任意一个约束条件，容器就会塌陷、错位或比例失真。
为什么 height: 56.25% 一定不生效
CSS 中 height 的百分比值是相对于父元素**高度**计算的；而父容器高度通常未显式设定（比如 height: auto 或未设），此时浏览器会把它当作 0 处理，所以 height: 56.25% 实际等于 0px。
padding-bottom 则不同：它的百分比始终基于父容器**宽度**计算，只要父容器有明确宽度（哪怕只是 width: 100%），这个值就能可靠撑开高度。
- 必须设
position: relative在父容器上，否则子元素的position: absolute会脱离上下文，定位到 body 上 - 必须设
height: 0—— 不是可选，是必须。否则padding-bottom会叠加在原有高度上，导致容器过高 - 别给父容器加
min-height或line-height，它们可能干扰padding的实际渲染高度
padding-bottom 数值怎么算才不出错
别背数字，现场算最稳。公式就一个：(height ÷ width) × 100%，结果就是你要填的 padding-bottom 值。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 16:9 →
9 ÷ 16 = 0.5625→padding-bottom: 56.25% - 4:3 →
3 ÷ 4 = 0.75→padding-bottom: 75% - 21:9（超宽屏）→
9 ÷ 21 ≈ 0.42857→padding-bottom: 42.857% - 如果视频源本身带黑边（比如 4:3 视频嵌在 YouTube 的 16:9 播放器里），按播放器 UI 的比例算，不是按原始视频比例
子元素（video 或 iframe）怎么填满才不溢出
绝对定位是唯一靠谱的方式。用 width: 100%; height: 100% 配合 top: 0; left: 0，能确保它严格贴合 padding 留出的空间边界。
- 必须用
position: absolute，不能用flex或grid填充——它们无法感知padding-bottom撑开的高度 - 推荐用
.container > *选择器，而不是单独写video和iframe，避免漏掉未来可能加的包裹层（比如广告 div） - 加
overflow: hidden到父容器上，防止某些浏览器中视频轻微溢出边框（尤其 Safari） -
object-fit: contain比cover更安全，保全画面全貌；若需填满且允许裁剪，再切到cover
嵌套在 Flex/Grid 里时最容易踩的坑
当视频容器被放进 display: flex 或 display: grid 的父级中，width: 100% 很可能失效，因为 Flex/Grid 默认行为会压制子项收缩。
- Flex 容器中，给视频容器加
min-width: 0，否则它可能拒绝变窄 - Grid 容器中，如果轨道是
auto或fit-content，padding-bottom仍按轨道宽度算，但容易被截断；稳妥做法是给轨道设minmax(0, 1fr) - 不要把响应式视频容器塞进另一个设置了
height的容器里——那会覆盖padding生成的高度，比例立刻崩坏
真正难的不是写出第一版能跑的代码，而是当它嵌进三层布局、加上媒体查询、又接入第三方播放器 SDK 后，依然保持比例不漂移。这时候，position: relative、height: 0、padding-bottom 这三者缺一不可，少一个，就多一分失控风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
