Initially in this file, I implemented a logic where the background images change on each reload. However, now I have a new requirement. I want to display a video in the background, and the video is stored locally in my Public folder. The project is built on React. Please provide assistance with the code implementation as well as guidance on the CSS aspect. The existing code snippet is included below.
import './App.css';
import Footer from './Components/Footer';
import Header from './Components/Header';
function App() {
// let imageArr = ["back.jpg", "front.jpg", "right.jpg"];
// let randomNum = Math.floor(Math.random() * imageArr.length);
// let randomImage = imageArr[randomNum];
return (
// <div className="App" style={{backgroundImage: `url(${randomImage})`}}>
<div className='container'>
<div className='container'>
<Header />
<Footer />
</div>
</div>
// </div>
);
}
export default App;