ogot ogot - 7 months ago 51
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:


The CSS used for the video is relatively straight forward:

position: absolute;
right: 0;
bottom: 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 */

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?


Use a relative position for the slides.


And then place your absolute positioned videos inside.