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 add the video element with the loop prop to make the video replay after it’s finished.

And the autoPlay prop makes the video start automatically when we load the page.

Conclusion

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