Adding a background video with React?

Question

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.

Answer 1

import sample from './sample.mp4';

<video className='videoTag' autoPlay loop muted>
    <source src={sample} type='video/mp4' />
</video>

Thank the note that 'autoplay' should be changed to 'autoPlay' from Mr_Antivius. This is an alternative way to play the video in React. It works for me. Remember that the sample.mp4 file is in the same directory of the JS file.

Answer 2

Actually, I was able to get Trevor's code working just fine in my project. I did have to add a closing tag to the source element, like so.

<video id="background-video" loop autoPlay>
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" />
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg" />
    Your browser does not support the video tag.
</video>

Also, note that 'autoplay' should be changed to 'autoPlay' or React will throw a warning at you and not auto play the video. Outside of those two changes, copying and pasting the code should work just fine.

ES6/Babel example:

'use strict';

import React, {Component} from 'react';

class Example extends Component {
    constructor (props) {
        super(props);

        this.state = {
            videoURL: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'
        }
    }

    render () {
        return (
            <video id="background-video" loop autoPlay>
                <source src={this.state.videoURL} type="video/mp4" />
                <source src={this.state.videoURL} type="video/ogg" />
                Your browser does not support the video tag.
            </video>
        )
    }
};

export default Example;

Answer 3

I think something like this will work:

#background-video{

height: 100%;
width: 100%;
float: left;
top: 0;
padding: none;
position: fixed; /* optional depending on what you want to do in your app */


}

<video id="background-video" loop autoplay>
  <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

You may run into problems with ratios depending on the video you use or the size of the clients screen.

So you may need to check out this post.

Also consider the size of screens today. What are you going to do if someone has a ridiculously large widescreen or something like that? The video will not be able to fit the screen unless you have video that has the same resolution.

I'm not suggesting a video is a bad idea. I simply want you to be aware of the problems!

Good luck!