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