必须用width: 100vw; height: 100vh;配合object-fit: cover和overflow: hidden实现无拉伸无黑边全屏视频背景，小屏需@media降级为静态图或关闭视频。

直接用 @media 套 object-fit: cover + 视口单位，就能让视频背景在不同分辨率下不拉伸、不留黑边、不卡顿——但关键在于断点选择和降级策略，不是堆样式。

video 元素必须用 vw/vh 而不是 %

用 width: 100% 和 height: 100% 会受父容器限制，一旦父容器没设高（比如 height: auto），视频就塌缩或溢出。必须用视口单位强制撑满：

• width: 100vw + height: 100vh 是基础，确保始终覆盖整个可视区
• 如果页面有固定 header 或 footer，用 height: calc(100vh - 80px) 更稳妥，避免遮挡内容
• 不要给 video 设 max-width 或 min-height，它们会干扰 object-fit 的裁剪逻辑

object-fit: cover 是核心，但得配 overflow: hidden

object-fit: cover 本身只控制视频如何缩放填充，不处理“超出部分是否可见”。常见错误是视频上下/左右被裁掉后，边缘仍能拖动或显示滚动条：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须给 video 的父容器（比如 .video-background）加 overflow: hidden
• 避免对 video 自身设 position: absolute 后忘记父容器 position: relative，否则裁剪区域错位
• 在 iOS Safari 上，object-fit 对 autoplay muted loop 视频支持稳定，但若漏了 muted，视频会静音且可能触发暂停

用 @media 降级比适配更重要

大屏播高清视频没问题，但小屏（尤其是低端安卓机）容易卡顿、发热、耗电。这时候响应式不是“怎么让视频更好看”，而是“什么时候该关掉它”：

• 在 max-width: 768px 断点里直接 display: none 视频，换一张 background-image 静态图
• 别用 min-device-width，它检测的是设备物理像素，而现代浏览器缩放、DPR 会让这个值失真；坚持用 max-width（CSS 像素）
• 如果必须保留视频，至少把 src 换成更小分辨率的 MP4（如 720p → 480p），通过 JS 动态切换 source 或服务端 User-Agent 判断

移动端自动播放的兼容性陷阱

即使写了 autoplay muted loop，iOS 和部分 Android 浏览器仍可能不触发播放，表现为黑屏或首帧静止：

• 必须确保 video 在 DOM 加载完成且用户有交互（如点击）后才调用 play()，否则会被静音拦截
• 用 preload="metadata" 替代 preload="auto"，减少初始加载压力
• 测试时别只看 Chrome DevTools 的 device mode，真机连上 Safari Web Inspector 才能看到实际 play() 是否被拒绝，错误信息是 NotAllowedError: play() can only be initiated by user gesture

最易被忽略的点：视频背景的 z-index 往往需要配合 fixed 定位和 transform 层叠上下文，否则在某些安卓 WebView 中会被其他元素遮盖——这不是样式问题，是渲染层顺序问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！