是，video标签默认按原始宽高比缩放，不填满容器；需配合width/height明确尺寸及object-fit: cover才能裁切适配，避免黑边或变形。
video 标签默认不填满容器？用 object-fit: cover 强制裁切适配
HTML 原生 <video></video> 默认行为是按原始宽高比缩放，不会拉伸或裁剪——所以直接设 width: 100%; height: 100vh; 后，常出现上下/左右黑边，或内容被压缩变形。关键不是调尺寸，而是控制「如何适配」。object-fit 就是解决这个的 CSS 属性，它和 <img> 行为一致，但对 <video></video> 同样生效。
必须搭配以下两点才有效：
-
<video></video>元素本身需有明确尺寸（比如width: 100vw; height: 100vh;或父容器设position: relative;+video设position: absolute;） - 父容器不能有
overflow: hidden以外的干扰（比如transform、clip-path可能截断视频渲染） - 推荐写法：
object-fit: cover;—— 保持比例、裁切溢出部分，真正实现「全屏覆盖」
为什么 object-fit: fill 不推荐用于背景视频
fill 会强制拉伸视频填满容器，完全忽略原始宽高比。人像变胖、文字压扁、运动轨迹失真——尤其当视频是 16:9，而屏幕是 21:9 或 4:3 时，形变肉眼可见。背景视频的核心诉求是「视觉沉浸」，不是「像素占满」；轻微裁切（cover）远比全局拉伸（fill）可接受。
实操中还容易踩一个坑：如果视频源分辨率低（比如 720p），用 cover 在 4K 屏上放大后可能模糊；这时应优先换高清源，而不是妥协用 fill。
自动播放 + 静音是绕不过去的硬性要求
所有主流浏览器（Chrome、Safari、Edge）都禁止非用户手势触发的有声视频自动播放。不加 muted 和 autoplay，视频根本不会动——哪怕你写了 object-fit 也没用。
必须同时满足：
-
autoplay属性（HTML 属性，不是 JS 调用play()） -
muted属性（静音，否则 Safari 直接拒绝 autoplay） -
playsinline（iOS Safari 必须，防止跳全屏） - 建议加上
loop，否则播完会留黑屏或首帧
完整标签示例：
<video autoplay muted loop playsinline><br><source src="bg.mp4" type="video/mp4"><br></source></video>
移动端 Safari 的 object-fit 渲染异常怎么办
iOS 15+ 已基本支持 object-fit，但仍有小概率出现「裁切错位」或「第一帧不生效」。这不是 CSS 失效，而是 Safari 对 <video></video> 的异步加载机制导致的渲染时机问题。
稳妥解法：
- 给
<video></video>加preload="auto"，提前加载元数据 - 用 JS 监听
loadedmetadata事件，再显式设置style.objectFit = 'cover'（避免 CSS 规则被初始渲染忽略） - 避免用
background-video这类自定义 class 控制尺寸，直接在<video></video>上写内联样式或高权重 class
复杂点在于：视频加载、解码、首帧渲染、CSS 计算、重排重绘，这整条链路上任何一环延迟，都可能导致 object-fit 表现不稳定——尤其低端安卓机或弱网环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
