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

但是，这不适用于多张幻灯片，因为部分横跨所有幻灯片 div 的长度。有替代解决方案吗？

Answer 1

使用幻灯片的相对位置。

.slide{
   position:relative;
}

然后把你的绝对定位视频放在里面。