How to add a background video with React?

To add a background video with React, we can add the loop, autoPlay and muted props to the video element.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video autoPlay loop muted>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
      </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.