Каким образом они могут так легко стилизовать видео?

Question

Я не совсем уверен, куда идти отсюда, но я видел этот сайт - http://www.equus-automotive.com/en_US/. И кажется, что видео довольно жидкое с шириной и высотой браузера. Полоса прокрутки даже не показывает, чего я пытаюсь достичь. Похоже, что видео постоянно сосредоточено.

Как они это сделали?

Вот то, что я до сих пор - https://jsfiddle.net/9Ly5tzws/

Большое спасибо за ваше время и усилия. Я очень ценю это!

<!--==================== 
 
---- Navigation Bar ---- 
 
=====================--> 
 
<div id="navbar"> 
 

 
    <ul> 
 
    <li>HOME</li> 
 
    <li>PRODUCTS</li> 
 
    <li>VIDEOS</li> 
 
    <li>MUTE</li> 
 
    </ul> 
 
</div> 
 

 

 
<!--================== 
 
---- Content Wrap ---- 
 
===================--> 
 
<div id="bgcontainer"> 
 
    <video id="bg" src="http://www.videvo.net/home.webm" autoplay="true" loop="true" muted="true"></video> 
 
</div> 
 

 

 
<!--============ 
 
---- Footer ---- 
 
=============--> 
 
<div id="footer"> 
 
</div>

Answer 1

Вы уже попробовали этот плагин, прежде чем http://vodkabears.github.io/vide/ или https://github.com/linnett/backgroundVideo?

Answer 2

для создания этой работы вам необходимо знать соотношение сторон вашего видео, которое отражено в обивке-верхней части контейнера. см. http://alistapart.com/article/creating-intrinsic-ratios-for-video для более подробного объяснения. Галочка в том, что браузеры вычислить отступы набор в процентах на основе ширины содержащего блока

#bgcontainer { 
     overflow: hidden; 
     display: block; 
     position: relative; 
     height: 0; 
     padding-top: 56.294%; 
     } 

    #bg { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
    }