答案是必须用CSS设置video的width和height并配合object-fit: cover，因内联宽高属性会强制像素渲染导致黑边或拉伸，而object-fit仅对有明确尺寸的替换元素生效。
直接删掉 width 和 height 这两个 HTML 属性，改用 CSS 控制尺寸和比例——这是最干净、最可控的解法。
为什么内联 width/height 会导致黑边或拉伸
HTML 的 width 和 height 属性是硬编码像素值，浏览器会强制按这个尺寸渲染，完全无视视频原始宽高比。比如写 width="640" height="360"，但实际视频是 4K（3840×2160），或容器在手机上变窄了，它照样撑开或压扁——结果不是留黑边，就是人物变胖、文字压扁。
- 内联属性优先级高于 CSS，
max-width: 100%或aspect-ratio会被无视 - 横竖屏切换时，固定像素值无法响应，容易触发横向滚动条
- 哪怕视频源分辨率很高，浏览器也只按你写的像素下载并缩放，浪费带宽
video 元素必须显式设宽高，object-fit 才生效
object-fit 不是“自动适配”，它只对有明确尺寸的替换元素起作用。如果只写 width: 100% 而 height: auto，那 object-fit: cover 实际不会裁切——因为高度没被约束，浏览器仍按原始比例推算高度，黑边照旧。
- 正确做法：给
video设width: 100%; height: 100%，再配合父容器的aspect-ratio或固定布局 - 更健壮的写法是用
aspect-ratio: 16 / 9作用于父容器（如.video-wrap），再让video填满它 - 别漏掉
overflow: hidden——object-fit: cover裁切后溢出的内容必须被截掉，否则会撑开布局或出现滚动条
video 标签上必须写 object-fit，不是父容器
很多人把 object-fit: cover 写在 .video-wrapper 上，结果无效。这个属性只作用于 video 元素本身（和 img 一样），且必须和它的宽高声明一起生效。
立即学习“前端免费学习笔记（深入）”；
- 错误：
.video-wrapper { object-fit: cover; } - 正确：
video { width: 100%; height: 100%; object-fit: cover; } - 使用 Video.js、vue-video-player 等封装库时，要穿透到原生
video元素加样式，不能只改外层 div - 某些老 Android WebView（如 4.4）不支持
object-fit，需 fallback 到position: absolute+overflow: hidden方案
全屏背景视频还额外要处理定位和交互
设了 width: 100vw; height: 100vh 还有黑边？大概率是 video 没脱离文档流，或者 body 有默认 margin。
- 必须加
position: fixed; top: 0; left: 0;，并确保body { margin: 0; } - iOS Safari 地址栏收起时视口高度变化，推荐用
height: 100dvh替代100vh - 背景视频默认会拦截鼠标事件，加
pointer-events: none；覆盖的文字按钮需同级、z-index 更高 - 别忘了
autoplay muted playsinline，否则现代浏览器根本不会播
真正麻烦的不是怎么写那一行 object-fit: cover，而是所有配套约束——宽高、定位、溢出控制、播放策略，缺一不可。漏掉任意一个，黑边就回来。
