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

Fullpage.js - Video + Background in same section

本文关键字：一部分 背景 js- 视频 Fullpage      更新时间：2023-09-26

我正在为我的网站使用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>

以下是如何创建这种效果
首先为你的视频创建一个容器，如果你已经有了，然后使用它：

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


所有这些看起来应该是这样的：

这里的在线示例 
<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;
}

感谢Chun的帮助，我成功了。

<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstpage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
				sectionsColor: [ '#1BBC9B', '#7E8F7C', '#1BBC9B', '#C63D0F'  ],
				verticalCentered: true,
				css3: true,
				afterRender: function(){
					//playing the video
					$('video').get(0).play();
				}
				
			});
		});
</script>
.videoContainer{
		position:absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width:100%;
		height:100%;
		background-size:100% 100%;
		background-size:contain;
		background-position:center center;
		object-fit:cover;
		z-index:50;
	
}
	.bgOverlay{
    	background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    	position:fixed;
		background-repeat:no-repeat;
		background-size:35% 35%;
		background-position:center bottom 90px;
    	top: 0;
		left:0;
		right:0;
		bottom:0;
		z-index:100;
}
    #section0 .layer{
		
		position: absolute;
		z-index: 1000;
		width: 100%;
		left: 0;
		top: 43%;
		
	}
      <div class="section" id="section0">
		 <div class="videoContainer">
         <video autoplay loop muted class="videoContainer">
        		<source src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" type="video/mp4">
				<source src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" type="video/webm">
         </video>
         
    	</div>
		<div class="layer">
			<h1>TOHA</h1>
			
		</div>
        <div class="bgOverlay"></div>
       	</div>

相关文章：