I am trying to embed a LOCAL video on a div background in React but it's not working. In fact, when I embed a URL video, it works, but not from LOCAL file. Is there something special to make this background video work in React?
Results
DO WORK --> https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
DO NOT WORK --> ./assets/videos/show.mp4 (the path is correct)
EDIT: I inserted controls property and have found out that the video exists, but it plays in blank screen. Any help would be appreciated.
.video-container {
height: 100vh;
position: relative;
width: 100vw;
}
.video-container video {
height: 100%;
object-fit: cover;
position: fixed;
width: 100%;
z-index: 0;
}<div className="video-container">
<video autoPlay muted loop id="video">
<source src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} type="video/mp4" />
</video>
</div>Apparently this is a path resolver problem with NodeJS and React compilation. Try to import your video as:
import myVideo from './assets/videos/show.mp4';
<div className="video-container">
<video autoPlay muted loop id="video">
<source src={myVideo} type="video/mp4" />
</video>
</div>
If this not work, try to put the video inside public folder, this will let the video available after the React compilation.
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.