Полная высота видео - падение содержания после того, как прямо под окном браузера

Question

Я пытаюсь добиться такого же функциональности с видео, как показано здесь: http://www.bootply.com/108614

Видео должно принять весь размер окна браузера и когда прокручивать вниз, он видит другое содержание немедленно , Очевидно, вы не можете размещать видео в качестве фона CSS и использовать высоту calc, поэтому вам нужно найти другое решение.

Любая помощь с решением?

Answer 1

Я нашел решение для достижения этого, используя 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(); 
    }); 
}); 

Working example in JSFIDDLE