video元素铺满全屏需同时满足：父容器设100vw/100vh并有明确尺寸、video设width/height 100%、object-fit: cover、display: block及overflow: hidden；仅width/height 100%会导致拉伸或黑边。
video 元素无法铺满全屏，不是靠 width: 100%; height: 100% 就能解决的——关键在 object-fit 的取值和父容器约束。
为什么 width: 100%; height: 100% 不够用
直接给 <video></video> 设宽高 100%，只保证它“撑满父容器”，但视频原始宽高比（如 16:9）会拉伸变形或留黑边。浏览器默认按内容比例缩放，不自动裁剪或拉伸画面。
必须配合 object-fit 控制内容如何适配容器，且父容器本身要有明确尺寸（不能是 height: auto）。
- 父容器没设
height，height: 100%失效（百分比高度需有已知高度的祖先） -
object-fit: fill强制拉伸，破坏比例；contain保持比例但留黑边；cover才是铺满+裁剪的正确选择 -
video默认是内联元素，建议加display: block避免底部空白
object-fit: cover 是铺满全屏的核心
它让视频等比缩放并裁剪，确保填满整个容器，不拉伸、不变形，是“铺满全屏”的标准解法。
立即学习“前端免费学习笔记（深入）”；
但注意：裁剪位置由 object-position 控制，默认居中；若想固定显示顶部/左侧，需额外设置。
<div style="width: 100vw; height: 100vh; overflow: hidden;">
<video
src="demo.mp4"
autoplay
muted
loop
style="width: 100%; height: 100%; object-fit: cover; display: block;"
></video>
</div>
-
overflow: hidden防止裁剪后溢出滚动条（尤其移动端） - 移动端 Safari 对
autoplay有静音限制，muted必须加 - 避免用
100%代替100vw/100vh—— 父级 padding 或 margin 会导致尺寸偏差
全屏时如何避免黑边或跳变
用户点击全屏按钮（requestFullscreen()）后，video 容器尺寸突变，若未重置 object-fit 或未监听 fullscreenchange，可能瞬间出现黑边或错位。
- 全屏后浏览器会重置部分样式，建议用
:fullscreen伪类加固样式 - 不要依赖 JS 动态改
style，优先用 CSS 规则覆盖 - 全屏下
100vh可能包含地址栏高度（iOS Safari），实际可视区域小于预期
video:fullscreen {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
兼容性与移动端特别注意点
object-fit 在 iOS Safari 9+、Android Chrome 33+ 支持良好，但老版本 UC 或 QQ 浏览器可能不支持——需降级 fallback。
- 不支持时，只能用 JavaScript 计算缩放比例 +
transform: scale()模拟cover，但性能差、易出错 - iOS Safari 全屏后会隐藏 controls，但若
controls属性存在，退出全屏可能残留 UI 残影 - 微信内置浏览器对
video全屏策略更激进，常强制跳转 native 全屏页，此时 CSS 控制权基本失效
真正难的不是写对 object-fit: cover，而是处理各种浏览器对“全屏”定义不一致带来的尺寸抖动和裁剪偏移——这些细节往往要靠真机反复调试才能稳定。
