video元素默认不保持宽高比，须用CSS通过aspect-ratio设定容器比例并配合object-fit控制缩放方式，避免HTML width/height属性导致的变形与响应式失效。
video 元素默认不保持宽高比，必须用 CSS 显式控制
HTML5 的 <video> 标签本身不会自动维持原始宽高比；即使设置了 width 和 height 属性，浏览器也仅按数值拉伸渲染，容易导致画面变形。真正可靠的方案是用 CSS 控制容器 + object-fit，而非依赖 HTML 属性。
用 object-fit: contain 或 object-fit: cover 配合固定容器
这是目前最通用、兼容性足够（Chrome 32+ / Firefox 36+ / Safari 10+ / Edge 16+）的解法。关键点在于：先给 <video> 设置一个有明确尺寸的父容器，再让视频在其中按规则缩放。
-
object-fit: contain：完整显示视频，留黑边，适合需要看清全部内容的场景（如教学视频） -
object-fit: cover：填满容器，可能裁剪边缘，适合海报式展示或背景视频 - 必须同时设置
width和height（或使用 aspect-ratio），否则object-fit不生效 - 记得加
overflow: hidden到容器上，避免cover模式下溢出
.video-container {
width: 100%;
height: 500px;
overflow: hidden;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
用 aspect-ratio + object-fit 实现响应式宽高比（推荐现代项目）
如果目标是严格保持原始比例（比如 16:9），且不需要支持 IE 或老版本 Safari，直接用 CSS aspect-ratio 是最简洁的方式。它能自动计算高度，无需 JS 或 padding-top 技巧。
- 设
aspect-ratio: 16 / 9后，只需指定宽度，高度自动适配 - 仍需搭配
object-fit，否则视频会拉伸填充整个区域 - 注意：Firefox 89+、Chrome 88+、Safari 15.4+ 支持；旧版可用
padding-top降级（但更难维护）
.video-responsive {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.video-responsive video {
width: 100%;
height: 100%;
object-fit: contain;
}
慎用 width 和 height HTML 属性
直接在 <video> 标签里写 width="640" height="360" 看似简单，但实际问题很多：
立即学习“前端免费学习笔记（深入）”；
- 响应式失效：无法随屏幕缩放，必须配合媒体查询手动覆盖
- 与 CSS 冲突：若同时设了
width: 100%，HTML 属性会被忽略，但行为不一致（尤其在 Flex/Grid 容器中） - 无法反映真实宽高比：很多视频编码信息里宽高比 ≠ 像素尺寸比（如 720×480 的 DV 视频可能是 4:3 或 16:9）
- 建议只在极简静态页面中临时使用，生产环境一律交给 CSS 控制
真正要稳住宽高比，核心就两条：容器有可预测的尺寸（用 aspect-ratio 或固定高/宽），视频用 object-fit 定义填充逻辑。别指望浏览器自动猜——它不会读视频元数据，也不会回退到原始像素比。
