padding-bottom百分比能撑开高度是因为其按父容器宽度计算，如16:9写56.25%；需配合position:relative与absolute、height:0及明确父宽，否则失效。
直接用 padding-bottom 百分比就能稳住视频容器比例，但必须配合 position: relative 和 position: absolute，否则 padding 会变成额外边距而不是“撑高”空间。
为什么 padding-bottom 百分比能撑开高度
因为 padding-bottom（和 padding-top）的百分比值，是按父容器的 宽度 计算的，不是高度。这个行为被用来“伪造”一个固定宽高比的空间——比如 16:9，就写 padding-bottom: 56.25%（9 ÷ 16 × 100）。
关键点：
-
padding-bottom必须写在包裹容器（如.video-wrapper）上，不能写在<video></video>自身 - 该容器必须设
position: relative，且不能有显式height（否则会覆盖 padding 效果） - 父容器需有明确宽度（如
width: 100%或max-width: 800px），否则百分比无基准
怎么写一个最小可用的 16:9 视频容器
结构和样式必须严格匹配，少一层或错一个属性都可能失效：
HTML：
<div class="video-wrapper"> <video controls><source src="demo.mp4" type="video/mp4"></source></video> </div>
CSS：
.video-wrapper {
position: relative;
width: 100%;
max-width: 800px;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
margin: 0 auto;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
注意：
-
height: 0是必须的，清空默认内容高度，让padding-bottom成为唯一高度来源 -
video必须设position: absolute，否则它会把padding-bottom当成上边距，导致整体高度翻倍 -
background: #000建议保留，避免视频未加载时露出父容器背景或空白
常见错误现象和排查点
视频只显示左上角、上下留黑边、容器塌陷、滚动条意外出现——这些问题基本都源于以下几处：
- 误把
padding-bottom写在video标签上：它只对块级容器起作用，video默认是替换元素，不响应 padding 百分比 -
.video-wrapper有border或padding：这会干扰 content box 宽度，导致百分比计算偏移 - 视频源本身不是 16:9（比如竖屏 9:16）：此时
object-fit: cover会裁边，object-fit: contain会留黑边；加在video上即可 - 框架（如 Next.js、Remix）默认给
video加display: inline：需显式重置为display: block或inline-block - 用了
flex或grid布局嵌套：某些 flex 容器会强制子项 stretch，覆盖 padding 高度，加align-self: center可修复
和 aspect-ratio 的关系与降级策略
aspect-ratio 看起来更简洁，但截至 2026 年 5 月，Safari 15.0–15.3 仍会静默忽略它，容器高度坍缩，且不报错——线上极难排查。
所以真实项目中，不要只靠 @supports (aspect-ratio: 1/1) 做降级。更稳妥的做法是：
- 主方案用
padding-bottom技巧，全浏览器可靠 - 叠加
aspect-ratio作为增强（现代浏览器优先使用它） - 避免伪元素或复杂嵌套结构，否则传统方案容易失效
真正容易被忽略的是：padding 百分比依赖父容器的 content box 宽度，而这个宽度会被 box-sizing、border、margin 暗中影响。调试时先检查 computed width，再看 padding 是否按预期计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
