To add a React video background, 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.