How to Add a Background Video in React JS

  2. HowTo
  3. React Howtos
  4. How to Add a Background Video in React …
MD Aminul Islam Feb 02, 2024
React React Background
How to Add a Background Video in React JS

Providing a video background is a very effective way to get user attraction. Implementing a video background using React is very easy.

This article will show us how we can create a video background in our React JS application, and we will discuss each step using examples and explanations to make the topic easier. Before we start, one important thing about video backgrounds is that high graphics video backgrounds may affect your application performance as all devices don’t contain the high configuration.

Add a Background Video in React JS

Here we will discuss the steps to include a video background in a React JS application.

To include a video background, follow the below three steps.

  • First of all, we are going to organize our index.html file like the below:

    HTML Code (index.html):

    <!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	  name="description"
	  content="Web site created using create-react-app"
	/>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
	<title>React App</title>
  </head>
  <body>
	<div id="root"></div>
  </body>
</html>

    Remember, most of the organization of this part will be done automatically by the system. But you can modify them based on your needs.

  • We will work on the main JS file, the App.js. Take a look at the code in this file:

    JS Code (App.js):

    import './App.css';

import video from './video.mp4';

function App() {
  return (<div><video autoPlay loop muted>
          <source src = {video} type = 'video/mp4' />
          </video>
		<div className='content'>
		  <h1>This is a text</h1>
          </div>
	</div>);
}

export default App;

    In the example above, we created two child elements inside a div container. The first element is a video that will work as a background; another contains some text.

  • Now, it’s time to include some CSS in our React JS app. We applied the below stylings in our React JS app.

    CSS Code (App.css):

    video {
  width: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

Now, after you’ve done all the steps perfectly, you will get the below output in your browser:

React Video Background - Output

The example codes shared in this article are written in React JS project. Your system must have the latest Node JS version to run a React project, so if your system doesn’t contain Node JS, install it first.

Author: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn