如何实现响应式全屏视频背景 解决100vh设置留白问题

• 无效属性冗余：#intro 中写的 background-image: url(../background.mp4) 完全无效，CSS背景属性仅支持图片格式，无法加载视频文件，相关的background-attachment、background-size属性对嵌入的video元素也不起作用。
• 高度规则不统一：#intro设置了固定最小高度min-height: 720px，但子元素.intro-overlay只设置了height: 100vh，当视口高度小于720px时，父section高度会被撑到720px，而遮罩层高度只有视口高度，差值部分就会露出底层的深灰色背景。
• 核心元素缺失样式：没有给<video>标签本身设置任何适配样式，浏览器默认会按照视频原始宽高比渲染元素，不会自动铺满父容器，当屏幕尺寸变化时，视频缩放后的尺寸小于容器尺寸就会出现留白。
• 层级规则缺失：没有给视频容器、内容区设置明确的z-index，容易出现内容被视频遮挡的异常。

按以下步骤调整样式即可实现视频始终全屏适配视口：

1. 清理#intro的无效属性，统一高度规则
   删掉#intro中所有和背景图相关的无效属性，把固定最小高度调整为和视口高度匹配，避免高度差：

#intro {
    width: 100%;
    height: 100vh;
    min-height: 100vh; /* 替换原固定720px的最小高度，始终和视口高度对齐 */
    display: table;
    position: relative;
    text-align: center;
    overflow: hidden;
}

2. 调整遮罩层样式，给视频提供定位基准
   给.intro-overlay设置溢出隐藏，确保视频不会超出容器范围，同时设置基础层级：

.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 替换原100vh，直接铺满父元素，避免不同场景下视口计算偏差 */
    opacity: .85;
    z-index: 0;
    overflow: hidden;
}

3. 给video元素添加核心适配样式
   这一步是解决留白的关键，实现类似background-size: cover的效果，让视频始终保持原始宽高比，同时完全覆盖容器，不会出现拉伸或留空：

#myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* 现代浏览器原生支持，保证视频比例正确同时铺满容器 */
}

4. 给上层内容区添加层级，避免被视频遮挡

.intro-content, .intro-social {
    position: relative;
    z-index: 1;
}

补充说明：如果需要兼容极老旧不支持object-fit的浏览器，保留min-width/min-height加居中位移的写法即可实现和cover一致的适配效果，不需要额外兼容代码。

内容的提问来源于stack exchange，提问作者user12037570