直接用<video>标签会撑破容器，因其默认为行内替换元素，宽高不继承父容器比例；自适应核心是保持比例缩放，最可靠方案是用padding-top百分比（如16:9为56.25%）配合绝对定位实现。
为什么直接用 <video> 标签会撑破容器
浏览器默认把 <video> 当作行内替换元素，宽高不继承父容器比例，设 width: 100% 后高度由视频原始宽高比决定，常导致上下溢出或留白。自适应的核心不是“填满”，而是“保持比例缩放”。
- 不能只靠
width: 100%+height: auto—— 它依赖视频自身aspectRatio属性（旧浏览器不支持） - 不要用
vh/vmax硬设高度 —— 屏幕尺寸变化时比例仍会断 - 真正可靠的方案是用
padding-top百分比触发垂直方向的相对计算（CSS 中只有 padding/margin 的百分比值相对于父容器宽度）
用 padding-top 实现 16:9 自适应容器
这是最兼容、最可控的方式：用一个外层容器控制比例，再用绝对定位把 <video> 填满它。
<div class="video-container">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>CSS 部分：
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 = 9 / 16 = 0.5625 */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 或 cover，按需选 */
}-
padding-top值必须是小数形式（如56.25%），不能写成56%或56.2%，否则 16:9 会轻微变形 -
object-fit: contain保证完整显示且不裁剪；cover适合全屏覆盖但可能切边 - 如果视频源本身带黑边（letterbox），
object-fit: cover可能放大黑边区域，此时改用fill更稳妥
响应式下如何切换不同宽高比（比如手机切 4:3）
单个容器无法自动识别设备并切换比例，得靠媒体查询手动控制 padding-top。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.video-container {
padding-top: 75%; /* 4:3 = 3 / 4 = 0.75 */
}
}- 别试图用 JS 动态算
padding-top—— 触发重排，且移动端 resize 频繁，性能差 - 常见比例对应值：
16:9 → 56.25%，4:3 → 75%，1:1 → 100%，21:9 → 42.857% - 如果页面有多个视频容器，建议统一用 CSS 自定义属性（如
--aspect-ratio: 56.25%），方便维护
现代写法：用 aspect-ratio 但要注意兼容性
Chrome 88+、Firefox 89+、Safari 15.4+ 支持原生 aspect-ratio，写法极简：
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}- IE 和 Safari 15.3 及更早版本完全不支持，上线前务必查 caniuse
- 即使支持，
aspect-ratio不影响子元素布局逻辑，video仍需显式设width/height或用object-fit - 服务端渲染或 SSR 场景中，若首屏 JS 未加载完，
aspect-ratio容器可能短暂塌陷 —— 此时 fallback 到padding-top更稳
实际项目里，padding-top 方案仍是主力；aspect-ratio 可作为渐进增强加在后面，不破坏基础体验。
