How to Add a Background Video with React?

Sometimes, we want to add a background video with React.

In this article, we’ll look at how to add a background video with React.

Add a Background Video with React

To add a background video with React, we can add the video element with the autoPlay prop.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video loop autoPlay>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>
  );
}

We have autoPlay loop muted added to the video element so that the video plays automatically, repeats when it finishes playing, and it’s muted respectively.

In it, we add the source element with the src attribute set to the URL of the video we want to play in the background.

We add the loop prop to make it restart when the video is finished playing.

The muted prop mutes the video.

As a result, we have a video that loops forever silently on the page.

Conclusion

To add a background video with React, we can add the video element with the autoPlay prop.