video元素默认不撑满父容器，需显式设置宽高并用object-fit控制填充方式；推荐object-fit:cover实现等比覆盖，避免黑边或变形，父容器须有明确高度。
video 元素默认不会撑满父容器，必须显式设置尺寸
HTML5 的 是替换元素（replaced element），行为类似图片：它有固有宽高比，且默认 display: inline，不会自动继承父容器宽高。直接写 width: 100%; height: 100% 往往无效，尤其当父容器没设高度或存在 padding/margin 时。
关键点在于：父容器必须有明确高度（不能是 height: auto），且需处理视频的宽高比拉伸/裁剪逻辑。
用 object-fit: cover 实现「铺满且不畸变」
这是最常用、最可靠的方案。它让视频内容等比缩放并覆盖整个容器，超出部分裁剪——效果类似背景图的 background-size: cover。
- 父容器需设
width和height（如height: 400px或height: 100vh） -
本身设width: 100%; height: 100% - 必须加
object-fit: cover，否则仍按原始比例显示，留黑边 - 注意兼容性：
object-fit在 IE 完全不支持，Edge 16+ 支持；如需兼容 IE，得用 poster 图 + JS 模拟或降级为 background-video
div.video-container {
width: 100%;
height: 500px;
overflow: hidden;
}
div.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}用 object-fit: fill 强制拉伸填满（慎用）
这个值会忽略原始宽高比，强行拉伸视频填满容器。画面一定变形，仅适用于对比例无要求的场景（如监控流、纯色测试视频）。
立即学习“前端免费学习笔记（深入）”；
- 代码上只改一个值：
object-fit: fill - 常见误用：把它当成「铺满」的通用解，结果用户看到被压扁或拉长的人物
- 移动端尤其明显——竖屏视频在横屏容器里会被严重扭曲
video {
width: 100%;
height: 100%;
object-fit: fill; /* 不推荐用于人像/主视觉视频 */
}父容器高度不确定时，用 aspect-ratio + object-fit 防黑边
如果父容器高度由内容决定（比如响应式卡片），但又想保持视频比例、避免上下黑边，可以用 CSS aspect-ratio（Chrome 88+/Firefox 89+/Safari 15.4+）。
- 给容器设
aspect-ratio: 16 / 9，再让video100% 填充 +object-fit: cover - 这样即使宽度变化，容器高度也会自动计算，视频始终居中覆盖
- 旧浏览器不支持
aspect-ratio，可用padding-top百分比 hack 替代（需额外 wrapper）
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}真正容易被忽略的是：很多开发者只写了 width: 100% 就以为完事了，却忘了 height 必须显式设定，也忘了 object-fit 才是控制填充方式的核心。没有它，100% 只是把视频“框”进去，不是“铺满”。
