应使用 aspect-ratio 或 padding-bottom 技巧实现视频宽度100%时高度自适应：现代浏览器用 video{width:100%;aspect-ratio:16/9;object-fit:cover}，旧浏览器用外层容器padding-bottom:56.25%配合绝对定位video。
视频宽度设为 100% 但高度不自动撑开？
直接写 width: 100%; height: auto; 在多数情况下**不会生效**——因为 <video> 是替换元素（replaced element），其默认宽高由 intrinsic size 决定，height: auto 并不按父容器比例缩放，而是按原始分辨率等比缩放后取“内容高度”，结果常是高度塌陷或溢出。
用 aspect-ratio 最简方案（现代浏览器）
给 <video> 或其外层容器加 aspect-ratio，配合 width: 100%，浏览器会自动算出对应高度。常见视频宽高比是 16 / 9：
video {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover; /* 防止拉伸变形 */
}注意：aspect-ratio 是 CSS Level 4 属性，Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版 Safari 需加 -webkit-aspect-ratio 前缀（但实际兼容性有限，建议降级处理）。
兼容老浏览器的 padding-bottom 技巧
核心是利用 padding-bottom 百分比值基于**父容器宽度**计算的特性，撑出固定宽高比的空间：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
position: relative; - 内部
<video>设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 外层容器用
padding-bottom: 56.25%;（即 9 ÷ 16 × 100%，对应 16:9）模拟高度
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}这个方法在 IE9+、所有移动端都可靠，但要注意：如果视频源分辨率不是 16:9，object-fit: cover 可能裁剪边缘；想完整显示可用 contain，但会有上下/左右黑边。
响应式断点下要不要改宽高比？
一般不需要。16:9 是通用选择，竖屏手机上视频虽变窄，但用户习惯上下滑动看全片。强行在小屏切 9:16 会破坏横屏体验，且需额外 JS 监听方向变化，得不偿失。
真正要处理的是：当父容器极窄（比如 max-width: 320px），padding-bottom: 56.25% 算出的高度可能过小导致 controls 被截断。这时可加媒体查询微调：
@media (max-width: 320px) {
.video-wrapper {
padding-bottom: 75%; /* 改为 4:3，提升控制条可见性 */
}
}宽高比调整是细节优化，不是必须项；优先保证 object-fit 和容器尺寸逻辑正确，比纠结百分比数字更重要。
