【问题标题】：Background Video in ReactReact 中的背景视频
【发布时间】：2022-07-15 16:58:19
【问题描述】：

我正在关注这个 CSS Trick 博客，为 react 项目设置背景视频，但它不起作用。

https://css-tricks.com/full-page-background-video-styles/

//Video.jsx

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

//index.css

#bgvid {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： css reactjs video background

【解决方案1】：

我正在回答我自己的问题。我不得不为 JSX 使用 camelCase。

    <video 
       autoPlay 
       loop
       playsInLine
       className="video-background" 
       muted
     >

html标签说明

自动播放：自动播放视频
循环：循环播放视频
className：在 css 中使用它
静音：将视频静音
playsinline：适用于移动设备。它允许视频在线播放，而不是强制全屏播放

css标签说明

z-index: -1 => 这意味着我希望视频位于网页内容后面 1 层
宽度：全屏宽度
背景：rgba(0,0,0,0) => 透明背景
（但如果你使用 react-bootstrap 你可以只使用 jsx 标签，bg-transparent）

【讨论】：

【解决方案2】：

嗯，使用 react 对我来说效果很好。我所要做的就是在 react 中使用视频元素。

首先，导入我假设在您的资产文件夹中的所需背景视频。例如：

import Myvideo from "./assets/home/myvideo.mp4";


export default function Video(){
return (


    <div className='myvideo'>
      <video src={Myvideo} autoPlay loop muted />
      <div className="content">
      <h1>Hi</h1>
      <p>This is my background video</p>
      </div>
      </div>
      
     );
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

从“./assets/home/myvideo.mp4”导入我的视频；

在您的返回正文中包含视频元素。
如下设置你的 CSS 样式。

//css
.myvideo {
  width: 100%;
  height: 100;
}

video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

您的视频现在应该在后台播放。

【讨论】：