I am trying to use FullPage JS to create a fixed video background with scrolling content. The issue I am facing is that when I set the video to section 1, it shifts to a white background when scrolling. Any assistance would be highly appreciated!
#fullpage {
background-attachment: fixed;
background-repeat: no-repeat;
}
<div id="fullpage">
<video autoplay loop muted id="myVideo">
<source src="video/empty.mp4" type="video/mp4">
<source src="video/empty.webm" type="video/webm">
</video>
</div>
#myVideo{
position: fixed;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black;
background-image: /* our video */;
background-position: center ;
background-size: cover;
object-fit: cover;
z-index: -1;
overflow: hidden
}