How to Create a Hero Section with Video Using React-Player
By: Chad Murobayashi
Tags: React, Website Development, JavaScript, Material Ui, Video Player

Getting started

In case you missed the previous articles, we initialized a React application using create-react-app. We already created a navigation bar and a button that opens up a signup form modal. Our project currently looks like this.

The first thing you need to do is find a video that you want to use as a background for the hero section. One website that I like to use is coverr. They have stock video footage that you can download for free. Find a video that you like and add it to the src folder.

Next, create a new file in the project called Hero.js . In this file, create a functional component called Hero and export it.

Then, import the Hero component in the App.js file and render it under the Navbar component we previously created. The App.js file will look like the following.

import Navbar from './Navbar';

import Hero from './Hero'; const App = () => {

return (

<div className="App">

<Navbar />

<Hero />

</div>

);

}; export default App;

Using react-player

In order to embed the video, we will use an external package called react-player. This package makes it easy to add videos to a React application. Install the library in the project using npm install react-player .

In the Hero.js file, import the ReactPlayer component from react-player and import the video that we added earlier.

import ReactPlayer from 'react-player';

import heroVideo from './HeroVideo.mp4';

The ReactPlayer component is easy to use. All you need to do is pass a url prop to it with the video you want to play. In our example, along with the url prop, we will also pass the following optional props.

<ReactPlayer

url={heroVideo}

playing

loop

muted

width="100%"

height="100%"

/>

Next, wrap the ReactPlayer component in a <section> tag. We will add CSS properties to properly display the video across the hero section in the section tag.

In my example, I am using the makeStyles hook from Material-UI to add styling. If you are not familiar with styling with Material-UI, check out their documentation here. You can also achieve the same with basic CSS if you prefer as well.

const useStyles = makeStyles(theme => ({

root: {

width: '100%',

height: '80vh',

'& video': {

objectFit: 'cover',

},

},

}));

What we are doing here is giving the section a width of 100% and a height of 80vh. Then, we are targeting the video tag and giving it an object-fit attribute of cover. This is an important step because we want the video player to always cover the entire section.

The current project will look like this.

Adding a dark overlay

The hero section is looking good so far, but what if we want to add content on top of the video? To make the content stand out more we will add a dark overlay to the video. This can be done the same way as you would anything else using basic CSS properties. We will use position: 'absolute' and top: 0 left: 0 .

First, create a <div> under the ReactPlayer component. We will again use Material-UI makeStyles to add the following styling properties to this <div> .

overlay: {

position: 'absolute',

top: 0,

left: 0,

width: '100%',

height: '100%',

backgroundColor: 'rgba(0, 0, 0, 0.5)',

},

Don’t forget to add position: 'relative' to the root component styling. We should now see the same website, but with a dark overlay over the video like below.

Adding a title and button

Finally, we can add content on top of the overlay. Feel free to add whatever you want to your website. In my example, I will add a title and a button.

Inside of the <div> we just created, I will use the Box component from Material-UI as a wrapper to center the content. If you are not familiar with the Box component, check out the article below.

In the Box component, I will add a title and button using the Typography component and Button component from Material-UI.

<Box

height="100%"

display="flex"

flexDirection="column"

justifyContent="center"

alignItems="center"

color="#fff"

>

<Typography variant="h3" component="h1" className={classes.title}>

Title Goes Here

</Typography>

<Button color="primary" variant="contained">

Click Me

</Button>

</Box>

I also added another value to makeStyles called title. This style is adding paddingBottom: theme.spacing(4) to create some spacing between the title and button.

If you are following along with my example, the project so far should look like this.