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.

I have created a simple react component for this. https://github.com/samAbeywickrama/reactjs-videobg — It worked yesterday., Aug 19 '19 at 05:49

score 32 · Answer 1 · answered May 10 '17 at 07:18

32

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.

answered May 10 '17 at 07:18

wangz

321
3
2

I try a similar import and I get a squiggly red line in VS wit the error - '(TS) Cannot find module ''.'. where 'sample' is the name of the file I am importing. – Kevin Burton Jun 26 '20 at 17:05
@KevinBurton it must be just that, you have placed your file somewhere else so it it unable to export it. – prinzu Jul 16 '20 at 16:52
1

If you're using tsx you'll need to declare a type for it i.e. ```declare module '*.mp4' { const src: string; export default src; }``` – wattry Oct 07 '20 at 16:50

Mr_Antivius · Answer 2 · 2016-03-26T05:06:16.083

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;

I also want to set my background image to be a video. Except the video's mp4 and ogg files are in my directory, and I imported them. However, the video will not appear in my browser. I am following this answer exactly. Does anybody have any clue? — Jessica, Jun 03 '19 at 00:09
@McFloofenbork - If you're still having trouble, it's best to open up a new question and post your code there, as it is a bit difficult to fully understand the scope of your issue. — Mr_Antivius, Jun 19 '19 at 14:25

Trevor Clarke · Answer 3 · 2018-10-12T16:33:34.593

7

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!

edited Oct 12 '18 at 16:33

answered Mar 26 '16 at 01:33

Trevor Clarke

1,482
1
11
20

1

Thanks so much for the reply. I'm afraid this isn't rendering in my React component, just because it looks like it doesn't know what a – c0derkr Mar 26 '16 at 01:51
LOL sorry I didn't see that you used react – Trevor Clarke Mar 26 '16 at 01:53
I am not sure how to use react... Sorry – Trevor Clarke Mar 26 '16 at 01:53
1

Yep, not React :) But this is a good answer too. Ppl just have to wrap this snippet with React Div – Ivan Stin Nov 16 '17 at 23:17

score 6 · Answer 4 · answered May 21 '20 at 07:51

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.

Adding a background video with React?

4 Answers4

Linked