移动端响应式布局下如何让背景视频铺满全屏消除底部黑边

移动端出现底部黑边是两个问题共同导致的：

1. 原有CSS中给video设置的height:1fr是无效属性值，仅固定宽度为100vw时，竖屏状态下视频按原始比例缩放后的高度不足以覆盖整个视口，会直接露出下层.overlay的黑色背景
2. React JSX中的视频属性写法不符合规范，autoplay等原生HTML属性没有转成小驼峰格式，iOS端缺少内联播放属性，会导致视频播放行为异常

分别修改JSX和CSS代码即可实现全尺寸屏幕无黑边全屏覆盖，视频不会拉伸变形。

修改React JSX代码 #

修正媒体属性的React命名规范，新增iOS端内联播放必要属性：

import './App.css';
import Footer from './Components/Footer';
import Header from './Components/Header';
function App() {
  return (
    <div className='overlay'>
      <video  
        src="back.mp4" 
        autoPlay 
        loop 
        muted 
        playsInline
      ></video>
      <div className='container'>
        <Header />
        <Footer />
      </div>
    </div>
  );
}

export default App;

修改CSS代码 #

核心用object-fit: cover实现和背景图cover一致的适配效果，同时修复移动端视口计算问题：

/* 全局重置默认边距，避免出现多余滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 优先用动态视口单位，兼容移动端浏览器地址栏弹出/收起的高度变化 */
  height: 100dvh;
  /* 兜底兼容不支持dvh的浏览器 */
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

video {
  position: absolute;
  /* 视频居中放置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 宽高自适应，最小撑满容器 */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  opacity: 0.8;
  /* 核心属性：保持视频比例裁剪铺满容器，无黑边不变形 */
  object-fit: cover;
  /* 层级放到最底，避免遮挡上层内容 */
  z-index: -1;
}

.container {
  position: relative;
  z-index: 1;
  padding: 3%;
  height: 100%;
}

• object-fit: cover是实现视频/图片等替换元素全屏适配的标准CSS属性，效果和background-size: cover完全一致：媒体会保持原始宽高比缩放，直到完全覆盖父容器，超出部分自动裁剪，不会出现拉伸变形
• 新增的playsInline是iOS Safari内嵌播放视频的必要属性，不加的话移动端会强制弹出原生全屏播放器，无法实现背景视频效果
• 用position: fixed替代原有的absolute定位，避免页面存在滚动内容时背景跟着偏移
• 用动态视口单位100dvh替代固定100vh，解决移动端浏览器地址栏显示/隐藏时的视口高度计算偏差，不会出现高度不够漏黑边、或者出现多余滚动条的问题
• 给视频设置min-width/min-height兜底，就算遇到极老旧浏览器不支持object-fit，也能保证视频完全铺满屏幕

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