javascript - Fullpage.js - 同一部分的视频+背景

Question

我正在为我的站点使用 Fullpage.js 系统。以下问题是我似乎无法让我的背景图片覆盖视频显示。

使用 .layer 类可以在视频上获取文本。但它不适用于背景图像。或者我似乎无法让它工作。

我已经联系了 fullpage.js github，他们说这是 CSS 相关时期。

代码:

<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
				sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C', '#1BBC9B', '#C63D0F'  ],
				verticalCentered: true,
				css3: true,
				afterRender: function(){


					//playing the video
					$('video').get(0).play();
				}
				
			});
		});
	</script>

#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:1;
	}
		#layer2{
		background-image:url(imgs/TOHA.svg);
		background-repeat: no-repeat;
    	background-attachment:fixed;
		background-size:cover;
    	background-position:center;
		background-size:;
		z-index:9999;
	
	}

/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */
	#section0 .layer{
		
		position: absolute;
		z-index: 4;
		width: 100%;
		left: 0;
		top: 43%;
		
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
		overflow: hidden;
	}

<div class="section " id="section0">
    <div class="layer2"></div>
    <div class="layer">
			<h1>Fixed elements</h1>
			<p>Create your own headers and footers</p>
		</div>
    
    	<video autoplay loop muted controls id="myVideo">
			<source src="imgs/flowers.mp4" type="video/mp4">
			<source src="imgs/flowers.webm" type="video/webm">
		</video>
		
	</div>

Answer 1

以下是创建此效果的方法。
首先为您的视频创建一个容器，如果您已经有了它，请使用它:

<div class="videoContainer">... Content will go here ...</div>

然后像这样设置您的 .videoContainer 样式，例如:

.videoContainer{
    width:80%; /* This will be the size of your background, let's say it's 80% */
    height:200px; /* This is size too */
    position: relative; /* This will be necessary to contain the image that will be created next to avoid it to go outside the .videoContainer because of its position:absolute; */
}

然后像这样创建叠加图像/背景:

.bgOverlay{
    background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

全部应该看起来像这样:

Online Example Here

<div class="videoContainer">
    <iframe width="100%" height="200" src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <div class="bgOverlay"></div>
</div>

和CSS:

.videoContainer{
    width:80%;
    height:200px;
    position: relative;
}

.bgOverlay{
    background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    opacity: 0.5;
}