React项目如何设置Public文件夹本地视频为页面背景（含代码+CSS）

核心实现逻辑 #

沿用之前随机切换背景图的随机数逻辑，将背景图片替换为固定定位的video标签，视频资源直接引用Public文件夹下的本地文件即可，不需要额外import导入。

修改后的App.js代码 #

import './App.css';
import Footer from './Components/Footer';
import Header from './Components/Header';
function App() {
  // 替换为你自己放在public文件夹下的视频文件名，推荐使用mp4格式兼容性最好
  const videoArr = ["/bg1.mp4", "/bg2.mp4", "/bg3.mp4"];
  const randomNum = Math.floor(Math.random() * videoArr.length);
  const randomVideo = videoArr[randomNum];
  return (
    <div className="App">
      {/* 背景视频层 */}
      <video
        autoPlay
        muted
        loop
        playsInline
        className="bg-video"
        src={randomVideo}
      />
      {/* 原有页面内容 */}
      <div className='container'>
        <div className='container'>
          <Header />
          <Footer />
        </div>
      </div>
    </div>
  );
}

export default App;

配套App.css样式代码 #

/* 全局重置，避免默认边距导致的滚动条、白边问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 背景视频核心样式 */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 保证视频不变形，按比例铺满整个屏幕 */
  z-index: -1; /* 置于所有页面内容下层 */
}

/* 内容容器抬升层级，避免被视频遮挡 */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
}

配置注意事项 #

• 视频路径不要带public前缀：React构建时会自动将public文件夹下的资源映射到站点根路径，直接写/你的视频文件名即可；如果在public下新建了videos子目录分类存放视频，路径对应改成/videos/bg1.mp4即可
• video标签必须保留muted属性：现代浏览器默认拦截有声视频的自动播放，加静音属性才能正常进入页面就播放
• playsInline属性用于兼容iOS Safari，避免视频触发时强制跳转到全屏播放
• 需要加载兜底图的话，给video标签加poster="/fallback.jpg"属性，填入public下的兜底背景图路径即可，视频加载完成前会先显示这张图

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