import React from "react";
import tree from "../components/tree";
function HomePage() {
return (
<div className="screen">
<div className="videoContainer">
<iframe className="videoContainer_video" width="1920" height="1080" src="https://www.youtube.com/embed/ByG3b0nIT_M?modestbranding=1&control=0&autoplay=1&showinfo=0&autohide=1&modestbranding=1&fs=0&loop=1&rel=0" frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"
</div>
</div>
);
}
export default HomePage;.videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
iframe {
width: 100%;
height:100%
}
.screen {
position: fixed;
z-index: -99;
width: 100%;
height: 100%;
}https://i.sstatic.net/KoD2H.jpgI'm currently developing a project that requires the usage of a YouTube video as a fullscreen background for the webpage. After reading numerous articles and attempting different solutions, I have only been successful in removing the control bar while leaving other elements like icons on the sides and start button intact. The project is built with react and my goal is to have the page load with the video as the sole fullscreen background element. Any assistance would be greatly appreciated. Thank you.