Adding a Background Video with React

How to embed a LOCAL video on a div background in React

First of all, thanks for everyone who tried to help me.

After inserting "controls" for video attribute, I noticed that the video was playing in background, but just BLANK (white video with controls). I followed some instructions from another post to config 'file-loader' for mp4 format. I did, but after the procedure still not worked.

Webpack 3 locates .mp4 file but video is not playable

Next, I rendered a new video file and then worked. So I can't clearly identify the source of the problem. I guess something happen on the first time I rendered the file, so probably was the VIDEO FORMAT.

For file rendering I used:
Kdenlive for Linux
Video HD 1080p 25 fps
render format: Generic (HD for web) > MP4-H264/AAC

Hope this can give a new approach for those with the same problem.

How can I make my background video full screen in react?

Set the position: fix, along with top & left properties. this will ensure the entire background area is covered.

In your case this will be in the variable VideoBg

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

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

Get my background video and image to change depending on what page(route) you are on

I fixed this by just calling the Background component into each page, was repeating code a bit but made it a lot easier!

---

Related Topics