本文详解如何通过纯 CSS 正确设置 HTML <video> 元素作为全屏首屏背景，解决常见尺寸错位、缩放异常问题，确保在不同设备上均铺满视口且保持比例协调。
本文详解如何通过纯 css 正确设置 html `
要让视频真正“撑满”整个首屏（100vw × 100vh），关键在于直接控制 <video> 元素自身尺寸与定位，而非包裹它的容器（如 .vid div）。原代码中将 min-width/min-height: 100% 应用于父级 <div class="vid">，再让内部 <video> 自由流动，这会导致视频按其固有宽高比缩放，无法强制拉伸覆盖——尤其当视频分辨率与屏幕不匹配时，极易出现留白或裁剪不足。
✅ 正确做法是：移除冗余包裹层（或保留但仅作语义/结构用途），并将样式直接作用于 <video> 标签本身，并使用 width: 100%; height: 100%; 配合 object-fit: cover 实现等比缩放+全屏覆盖。
以下是优化后的完整实现方案：
* {
margin: 0;
box-sizing: border-box;
}
section {
display: block;
height: 100vh;
width: 100vw;
}
.homepage {
overflow: hidden;
position: relative;
}
/* 关键：样式直接作用于 video 元素 */
.homepage video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 保持宽高比，裁剪溢出部分以填满 */
opacity: 0.7;
z-index: -1; /* 确保视频置于内容下方 */
}<div style="background-color: black;" data-spy="scroll" data-target=".navbar">
<section class="homepage">
<!-- 移除 .vid 包裹层更简洁；若需保留，确保 video 是其唯一直接子元素 -->
<video
src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
autoplay
loop
muted
playsinline
type="video/mp4">
</video>
</section>
</div>? 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须添加 playsinline（iOS Safari 兼容）和 muted（现代浏览器 autoplay 强制要求）；
- ✅ z-index: -1 可防止视频遮挡文字或按钮等交互内容；
- ⚠️ 避免对 <video> 使用 min-width/min-height —— 它们会破坏绝对定位的精确控制，导致尺寸“弹性”而非“强制填充”；
- ? 若需兼容低版本浏览器（如 IE），可补充 background-size: cover 的降级方案（用 poster 图片），但主流环境推荐优先使用原生 <video>；
- ? 响应式增强建议：可为小屏设备添加 @media (max-width: 768px) 规则，适当降低 opacity 或启用 object-fit: contain 防止关键内容被过度裁剪。
通过以上调整，视频将严格贴合视口边界，无论桌面、平板还是手机，均能实现稳定、高性能、语义清晰的全屏背景效果。
