ogot ogot - 22 days ago 5
CSS Question

fullPage.js - background videos in multiple slides

I'm looking for a way to have full page video backgrounds in the same section using fullpage.js. Essentially what is achieved here, but with a full background video in each slide:

http://alvarotrigo.com/fullPage/examples/videoBackground.html

The CSS used for the video is relatively straight forward:

#myVideo{
position: absolute;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
z-index:3;
}


However this does not work with multiple slides due to the way sections span the length of all the slide divs. Is there an alternative solution?

Answer

Use a relative position for the slides.

.slide{
   position:relative;
}

And then place your absolute positioned videos inside.