Hope you are fine. I want to make a solution to my problem on the reactjs website. First, I created a route path in which all of my functionality is in my body.JSX component when the user first time visits my website it shows the homepage of my website in which he will see a navbar banner video and a footer, Now the problem is when the user first time visits my website the video in the banner section does not automatically start when the user visits another page like about us or contract and move back to my homepage then it start why it's happening I also use the lifting state up in my project but it doesn't solve my problem I will send the code of both body and banner component.
Here is the Banner.jsx component code
import React from 'react';
import './Banner.css';
import ReactPlayer from 'react-player';
import Video from './Asset/ebvideo.mp4';
const Banner = () => {
return (
<>
<div className="banner">
<ReactPlayer playing={true} controls={false} url={Video} fallback={null} autoPlay={true} width="1092px" height="600px" className='bvideo'/>
</div>
</>
)
}
export default Banner;
and Body.jsx code is
import React, { useState } from 'react';
import Navbar from './Navbar';
import './Body.css';
import Banner from './Banner';
import FooterSection from './FooterSection';
function Body() {
const [downloadCount, setDownloadCount] = useState(0);
const showComingSoonMessage = () => {
alert('Coming Soon!!!');
};
return (
<>
<Navbar />
<Banner />
<div className="downloads">
<button
type="button"
className="btn btn-dark downloadbtn"
onClick={showComingSoonMessage}
>
Download
</button>
</div>
<FooterSection />
</>
);
}
export default Body;
And the main App.jsx file code is :
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Navbar from "./Components/Navbar.jsx";
import Login from "./Components/Login";
import { BrowserRouter,Routes,Route } from "react-router-dom";
import Signup from './Components/Signup';
import AboutUs from "./Components/AboutUs.jsx";
import Contact from "./Components/Contact";
import Body from './Components/Body';
import Delivery from './Components/Delivery';
import CDelivery from "./Components/CDelivery";
import Gallery from "./Components/Gallery.jsx";
import Banner from "./Components/Banner.jsx";
function App() {
return (
<>
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Body />}></Route>
<Route path="/Banner" element={<Banner />}></Route>
<Route path="/Navbar" element={<Navbar />}></Route>
<Route path="/Login" element={<Login />}></Route>
<Route path="/Signup" element={<Signup />}></Route>
<Route path="/AboutUS" element={<AboutUs />}></Route>
<Route path="/Contact" element={<Contact />}></Route>
<Route path="/Delivery" element={<Delivery />}></Route>
<Route path="/CDelivery" element={<CDelivery />}></Route>
<Route path="/Gallery" element={<Gallery />}></Route>
</Routes>
</BrowserRouter>
</div>
</>
);
}
export default App;
The flow of the rendering components starts from the body component. And here is the App.js file in which I created the routes of my project now I want a solution when the user first time visits my website the video will start automatically on my homepage. I don't know whether its a browser support problem or a rendering issue.