17370845950

video元素默认不保持宽高比，须用CSS通过aspect-ratio设定容器比例并配合object-fit控制缩放方式，避免HTML width/height属性导致的变形与响应式失效。

video 元素默认不保持宽高比，必须用 CSS 显式控制

HTML5 的 标签本身不会自动维持原始宽高比；即使设置了 width 和 height 属性，浏览器也仅按数值拉伸渲染，容易导致画面变形。真正可靠的方案是用 CSS 控制容器 + object-fit，而非依赖 HTML 属性。

用 object-fit: contain 或 object-fit: cover 配合固定容器

这是目前最通用、兼容性足够（Chrome 32+ / Firefox 36+ / Safari 10+ / Edge 16+）的解法。关键点在于：先给 设置一个有明确尺寸的父容器，再让视频在其中按规则缩放。

• 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 属性

直接在 标签里写 width="640" height="360" 看似简单，但实际问题很多：

• 响应式失效：无法随屏幕缩放，必须配合媒体查询手动覆盖
• 与 CSS 冲突：若同时设了 width: 100%，HTML 属性会被忽略，但行为不一致（尤其在 Flex/Grid 容器中）
• 无法反映真实宽高比：很多视频编码信息里宽高比 ≠ 像素尺寸比（如 720×480 的 DV 视频可能是 4:3 或 16:9）
• 建议只在极简静态页面中临时使用，生产环境一律交给 CSS 控制

真正要稳住宽高比，核心就两条：容器有可预测的尺寸（用 aspect-ratio 或固定高/宽），视频用 object-fit 定义填充逻辑。别指望浏览器自动猜——它不会读视频元数据，也不会回退到原始像素比。