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