Adding a background video with React?

user_5125516 0
Viewed 68494

I'm trying to build a simple landing page that contains a fullscreen background image, that will play as soon as the content loads.

Is there a way to do this using React or CSS inside of React?

I've tried using the npm module react-drive-in, but I can't for the life of me figure out how to load my React components over the video. The video keeps loading over my other components.

reactjs css javascript
4 Answers

The below code also sets a poster. That is shown while the video loads or in browsers that can't play the video.

  import clip from './clip.mp4'; 
  import Poster from './Poster.png';  

    <video autoPlay loop muted poster={Poster}>
            <source src={clip} type='video/mp4' />
            <source src={clip} type="video/ogg" /> 
    </video>

But,its a good practice to show that background video only on larger devices. Because on mobile phones background video may take up too many system resources and effects the performance.So,add a media query and set display:block for mobile devices.

user_79207210
Related