1
我试图实现与视频相同的功能在这里看到:http://www.bootply.com/108614全高视频 - 后降的内容正下方的浏览器窗口
视频应该采取整个浏览器窗口大小,当用户滚动下来,他立即看到其他内容。显然,你不能将视频作为CSS背景并使用calc高度,因此需要找到另一种解决方案。
任何解决方案的帮助?
我试图实现与视频相同的功能在这里看到:http://www.bootply.com/108614全高视频 - 后降的内容正下方的浏览器窗口
视频应该采取整个浏览器窗口大小,当用户滚动下来,他立即看到其他内容。显然,你不能将视频作为CSS背景并使用calc高度,因此需要找到另一种解决方案。
任何解决方案的帮助?
我找到了解决方案,通过使用javascript来计算视口高度来实现这一点。
HTML
<div class="head">
<div class="video-content">
<video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
</video>
</div>
</div>
<div class="content">
here is content
</div>
CSS
.welcome {
height: 100%;
}
.content {
width: 100%;
height: 500px;
background: yellow;
}
video#bgvid {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
JAVASCRIPT
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('.head').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
您是否尝试过自己什么? –
是的,我尝试了多种不同的方式。现在我找到了一个解决方案如何实现它。 – ace