padding-bottom能实现等比缩放，因它按父宽计算（如56.25%=宽×0.5625），而height百分比依赖父高（常为0）故失效；需同时设height:0、position:relative、video绝对定位铺满，并按“高÷宽×100%”算值。
padding-bottom 能实现视频容器等比缩放，但只写 padding-bottom: 56.25% 是不够的——漏掉任意一个约束条件，容器就会塌陷、错位或比例失真。
为什么 height: 56.25% 一定不生效
CSS 中 height 的百分比值是相对于父元素**高度**计算的；而绝大多数容器默认高度为 auto，浏览器会把它当作 0 处理，所以 height: 56.25% 实际等于 0px。padding-bottom 则不同：它的百分比始终基于父容器**宽度**计算，只要父容器有明确宽度（哪怕只是 width: 100%），这个值就能可靠撑开高度。
padding-bottom 数值怎么算才不出错
别背数字，现场算最稳。公式就一个：(height ÷ width) × 100%，结果就是你要填的 padding-bottom 值：
- 16:9 →
9 ÷ 16 = 0.5625→padding-bottom: 56.25% - 4:3 →
3 ÷ 4 = 0.75→padding-bottom: 75% - 9:16（竖屏）→
16 ÷ 9 ≈ 1.7778→padding-bottom: 177.78% - 如果嵌入 YouTube iframe，按播放器 UI 框架比例算，不是原始视频比例
包裹容器必须设 height: 0 和 position: relative
常见错误是只写 padding-bottom 却漏掉这两条：
-
height: 0确保padding成为唯一高度来源；否则它会叠加在原有高度上，导致容器过高 -
position: relative是为了让内部video能用position: absolute正确锚定；否则绝对定位会脱离上下文，直接定位到body - 父容器若有
border或padding，会干扰width基准（因为百分比padding基于 content box 宽度），建议加box-sizing: border-box - 别给父容器加
min-height或line-height，它们可能干扰实际渲染高度
video 元素必须绝对定位且铺满
单纯给 video 设 width: 100% 和 height: auto 不行——它不参与容器高度计算，会塌陷或只显示左上角一小块。必须：
立即学习“前端免费学习笔记（深入）”；
-
position: absolute+top: 0+left: 0+width: 100%+height: 100% - 删掉 HTML 中的
width和height属性，否则会覆盖 CSS 控制 - 加
overflow: hidden到父容器上，防止 Safari 中视频轻微溢出边框 - 若容器被放进
display: flex或display: grid的父级中，需额外加min-width: 0防止它拒绝变窄
margin/padding、video 标签残留内联宽高属性、以及在 Flex 容器中忘了设 align-items: flex-start 防止绝对定位元素被居中截断。 
