用 object-fit: cover 可使 video 标签铺满容器且保持比例，需配合 width: 100%; height: 100%; display: block 及父容器定位约束；background: url(video.mp4) 无效，css 不支持视频作为背景。
background-video 无法铺满容器？用 object-fit: cover 而不是 width: 100%; height: 100%
直接设 width: 100%; height: 100% 会拉伸变形，尤其视频宽高比和容器不一致时。真正起作用的是 object-fit —— 它控制的是替换元素（比如 <video></video>）内容如何适应其盒模型，和 background-image 的 background-size 是两套机制。
常见错误是把视频当背景图写 CSS，结果发现 background-size: cover 对 <video></video> 标签完全无效 —— 因为它根本不是背景，而是普通流内元素。
-
object-fit: cover保持比例裁切填充，最常用 -
object-fit: fill强制拉伸，丢比例，慎用 -
object-fit: contain完整显示但可能留黑边 - 必须配合
width: 100%; height: 100%或固定尺寸才生效
为什么不能用 background: url(video.mp4)？
CSS 的 background 不支持视频资源。浏览器会静默忽略 background: url(...mp4)，退回到纯色或空背景，且控制台几乎不报错，极难排查。
真实可行的路径只有一条：用 <video></video> 标签作为底层元素，再用定位 + z-index 压到背景层。这不是“技巧”，是唯一符合标准的做法。
- HTML 中必须有
<video></video>元素，不能靠 CSS “生成” - 需设
position: absolute+top: 0; left: 0; width: 100%; height: 100%覆盖父容器 - 父容器需有
position: relative或position: fixed才能约束定位范围 - 记得加
autoplay muted loop属性，否则多数浏览器禁止自动播放
video 加了 object-fit 还是没填满？检查这三点
最常卡在这几个细节上，不是代码写错，而是上下文漏了约束：
- 父容器没有明确高度（比如只有
height: auto），100%就算不出来 —— 给父容器设min-height: 100vh或具体像素值 - 视频标签默认有
display: inline，导致底部留白（像图片一样），加display: block消除 - 用了
poster图但尺寸不对，初始帧会按 poster 比例撑开盒子，等视频加载后才重绘 —— 直接去掉poster或确保它和视频同尺寸
移动端自动播放失败？muted 不够，还得加 playsinline
iOS Safari 和部分安卓浏览器要求视频在非全屏模式下自动播放，必须同时满足：autoplay、muted、playsinline。缺任意一个，视频就静音卡住或弹出全屏提示。
另外，object-fit 在 iOS 10+ 支持良好，但老版本（如 iOS 9）不支持，若需兼容，得用 JS 检测并 fallback 到 JS 计算缩放比例 + transform: scale()。
-
autoplay和muted是硬性前提 -
playsinline防止 iOS 自动全屏 - 不要依赖
loadeddata或canplay事件来补加play()—— 用户手势触发前，JS 调用play()会被拒绝
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
