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

时间:2015-04-08 17:27:26

标签: javascript jquery html css fullpage.js

我正在为我的网站使用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>
&#13;
#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;
	}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

以下是如何创建此效果 首先为您的视频创建一个容器(如果您已经拥有它),而不是使用它:

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

答案 1 :(得分:0)

这帮我感谢Chun的帮助。

&#13;
&#13;
<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>
&#13;
.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%;
		
	}
&#13;
      <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>
&#13;
&#13;
&#13;