我正在寻找一种使用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的长度的方式，因此这不适用于多张幻灯片。有替代解决方案吗？
为幻灯片使用相对位置。
.slide{
position:relative;
}
然后将绝对定位的视频放入其中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句