fullPage.js - 多张幻灯片中的背景视频

Question

我正在寻找一种方法在fullpage.js的同一部分中显示完整页面视频背景。从本质上讲这是怎么实现的，但在每张幻灯片的完整背景视频：

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

用于视频的CSS是比较直截了当：

#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; 
    } 

然而，这并不多工作由于节段跨越所有滑块的长度而滑动。有其他解决方案吗？

Answer 1

使用幻灯片的相对位置。

.slide{ 
    position:relative; 
} 

然后将您的绝对定位视频放在里面。