-2

I am using FullPage JS and Would like to implement a fixed a video background with scrolling content. I have the video set to section 1 however when scrolling it shifts to a white a background. An help would be great!

#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
}
PaKMaN
  • 1

1 Answers1

1

Why are you making it so complex? Check out this simple tutorial for video background. http://marketblog.envato.com/tips/video-background-html5-video/

Below CSS snippet will do the job for you.

video {
  margin: 0;
  padding: 0;
}
.content {
  position: relative;
  z-index: 2;
}
.video {
  position: fixed;
  z-index: 1;
}

corresponding HTML part

<body>
 <video id="my-video" class="video">
   <source src="media/demo.mp4" type="video/mp4">
   <source src="media/demo.ogv" type="video/ogg">
   <source src="media/demo.webm" type="video/webm">
 </video>
</body>
Mahesh
  • 1,427
  • 2
  • 19
  • 42
  • 1
    Have you even taken a look at your link? In it you can see a full screen video element needs more properties..`.video { position: fixed; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); }` – Alvaro Apr 22 '16 at 12:18
  • 1
    It seems to me his problem is related with fixed videos and the use of `translate3d` properties used by fullpage.js. – Alvaro Apr 22 '16 at 12:20