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

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