Because I will never pass down a Rent the Musical reference.

I’ll (Video) Cover You!

A quick and dirty background video tutorial in React

There’s nothing more trendy and sleek right now in web design than background video, especially on big, full-width cover pages. Using video backgrounds wasn’t possible for a long time because not all browsers supported the solutions, but with the implementation of HTML5 combined with the increasing speed at which high resolution streaming videos can be rendered, the practice is becoming more and more popular.

I recently used background video on a little application I made, Does It Bechdel?, a tool that helps expose sexism in Hollywood by making it easy to see if your favorite films (and their actors and directors) pass the Bechdel Test. Now, there are important design questions that you should ask yourself before implementing background video in your project (such as how distracting video and motion can be for the user experience). However, if you still want to implement this kind of design solution, I’ve figured out a really easy way to do it using React.

A preview of the background video implementation on my web app: Does It Bechdel?

First off, I used an npm package called React Video Cover. It’s a really simple component that has a number of customization options that allows you to dictate things like size, looping, etc. of your component. The great thing about this package is that is supports resizing, so that your video and (more importantly, it’s aspect ratio) will be preserved if you user resizes their screen. This makes it really useful for mobile-responsive design, so that your site looks great in landscape or portrait orientations.

Installation:

Installing is pretty simple, just run:

npm install --save react-video-cover

or, if you use yarn:

yarn add react-video-cover

Once you do that, you can now import the <VideoCover/> component from 'react-video-cover' like so:

import React from 'react';
import VideoCover from 'react-video-cover'

Here’s a very basic implementation of the VideoCover component:

class VideoBackground extends Component {
state = {
    resizeNotifier: () => {},
  }
render() {
    const videoOptions = {
      src: '/your_background_video_path.mp4',
      autoPlay: true,
      loop: true,
      muted: true
    };
    const style = {
      width: '150vw',
      height: '150vh',
      position: 'fixed',
      margin: 'auto',
      top: '-25vh',
      left: '-25vw',
      zIndex: -2,
    };
return (
      <div style={style} >
        <VideoCover
          videoOptions={videoOptions}
          remeasureOnWindowResize
          getResizeNotifier={resizeNotifier => {
            this.setState({
              resizeNotifier,
            });
          }}
        />
      </div>
    );
  }
}
export default VideoBackground;

The things you’ll have to adjust for yourself are the videoOptions and style. Both of these are objects with a series of attributes that are passed to the VideoCover component.

As you can see from my videoOptions object, I have the src which is the path for my video file that I want played. You can either host it inside your public folder or from some other server. The autoPlay option accepts a boolean, if true the video plays on load. This is the typical implementation, but there are some situations where you may not want that, especially if your video content is jarring or alarming. Ifloop is true, then the video will repeat once it has finished. muted makes the video automatically muted when played. There are other options that allow the video to be played and paused on click and or allow the component to remeasure on a window resize. You can check out the documentation for more.

The style object is good ol’ CSS. There are copious resources for CSS on the web so I won’t go into too much detail, but I will direct you to the width and height units I used to size my video:

width: '150vw',
height: '150vh',
top: '-25vh',
left: '-25vw',

The vw unit stands for “viewport width” and vh unit stands for “viewport height”. These units stand for 1 percent of your screen’s (or viewport) width and height. So 100vw and 100vh would equal 100% screen width and 100% screen height. If, for whatever reason, you want your video to be larger (or smaller… but why would you ever want that?) than your screen, you can set your video to be more than 100% vw or vh. However, if you do this, to keep the video centered, you’ll need to offset that with a top and left CSS attribute that move the video’s reference position (it’s top left corner) from its default spot at the top left of its container. You’ll have to offset by half of the excess of 100%, as I did above.

PRO-TIP!

Color and gradient overlays! Most of the time you’re using background video, you’ll have some kind of text or components overlayed on top of it… hence the operating word being “background.” Most videos don’t come color graded to make it easy for your copy to pop, so putting a div on top of the video component with color and opacity can help with that. Here’s some sample code I used in my app:

<div style={{backgroundColor: 'gray', opacity: .5, width: '120vw', height: '120vh', position: 'fixed', top: '-10vh', left: '-10vw', zIndex: -1,}}></div>

Happy hacking!