如何確保HTML視頻填充響應網頁的屏幕

Question

如何設置CSS（或其他），以確保我正在使用的視頻填充屏幕，100％寬度和100％（減去固定的導航欄的高度）。不介意它是如何工作的，即超出或超出黑條或切除視頻的邊或頂部。

到目前爲止，這是我的了：

<div class="row content"> 
    <video autoplay loop muted poster="screenshot.jpg" id="background"> 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
    </source> 
    </video> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
     <h1 class="text-center">Title</h1> 
     </div> 
    </div> 
    <hr> 
    </div> 
</div> 

我使用的引導，CSS和HTML。

這是JSFiddle。它沒有顯示這個問題，因爲窗口按比例調整，但希望會有所幫助。

Answer 1

你可以把它放在一個絕對定位的黑色背景框中，並填充屏幕。調整頂部以考慮菜單高度。

http://jsfiddle.net/1jz80dws/

HTML

<div class="fill"> 
    <video autoplay loop muted poster="screenshot.jpg" id="background"> 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
     </source> 
    </video> 
</div> 

CSS

.fill { 
    position: absolute; 
    background-color: #000; 
    top:70px; 
    right:0; 
    bottom:0; 
    left:0; 
}