视频窄屏自适应应将aspect-ratio设于容器而非video标签，配合max-width:100%和width:100%实现响应式；对多比例视频可用语义类名或data属性动态控制，并为旧浏览器提供padding-top降级方案。
视频在窄屏下无法自适应，通常是因为标签默认按原始尺寸渲染，且未设置宽高约束或响应式比例。用 aspect-ratio 配合 max-width: 100% 是现代、简洁、可靠的解法，无需 JavaScript，兼容主流浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）。
给 video 容器设 aspect-ratio，而非 video 本身
不是所有视频都是 16:9。若页面混用 4:3、1:1 或竖屏视频（9:16），硬写死 如果需支持 Safari 15.3 或更早版本， 立即学习“前端免费学习笔记（深入）”； 某些安卓浏览器或 iOS Safari 在横屏进入原生全屏时，可能忽略容器的 基本上就这些。核心就两条：用容器承载 + aspect-ratio 定比例，再加 max-width 锁宽度。不复杂但容易忽略细节。aspect-ratio 最好作用于包裹 的容器（如 标签上——因为部分浏览器对替换元素（如 video、iframe）的 aspect-ratio 支持尚不完善，且容易被 controls 或 poster 干扰。
.video-wrapper {
aspect-ratio: 16 / 9;
max-width: 100%;
height: auto;
}
.video-wrapper video {
width: 100%;
height: 100%;
display: block;
}
处理不同视频源的宽高比
16 / 9 会导致拉伸或留黑边。
对应 CSS：
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.video-wrapper[data-ratio] {
aspect-ratio: attr(data-ratio);
}
兼容老浏览器的降级处理
aspect-ratio 不生效，可叠加传统“padding-top 百分比”技巧作为 fallback：
aspect-ratio 作为主逻辑；@supports not (aspect-ratio: 1) 注入 padding 方案；
.video-wrapper {
position: relative;
max-width: 100%;
}
.video-wrapper::before {
content: "";
display: block;
padding-top: 56.25%; /* 9/16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
注意移动端全屏与 controls 布局冲突
aspect-ratio。此时确保：
– video 标签没写死 width 或 height 内联样式；
– 移除 object-fit: cover 等可能干扰原生控件渲染的属性；
– 如需自定义 controls，建议用 JS 控制，而非纯 CSS 覆盖。
