整頁在HTML5中裁剪視頻 - 沒有jquery

Question

我想在我的網站的背景添加一個視頻。我想這樣做沒有任何JavaScript來優化加載時間。 到目前爲止，我用這個代碼： HTML：

 <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/video-poster.jpg" > 
      <img src="img/video-poster.jpg" alt=""/> 
      <source type="video/mp4" src="video/video.mp4"/> 
      <source type="video/ogg" src="video/video.ogv"/> 
     </video> 

CSS：

#video_background { 
     position: absolute; 
     bottom: 0px; 
     right: 0px; 
     min-width: 100%; 
     min-height: 100%; 
     width: auto; 
     height: auto; 
     z-index: -1000; 
     overflow: hidden 
    } 

的問題是，我的影片有一個全景格式（16/9）與頂部和底部的黑邊。顯然我不希望他們出現在屏幕上。所以使用這段代碼，黑色頁邊距出現在頁面的底部。

如何確保黑色邊距被裁剪並且仍然具有響應性顯示？

感謝

Answer 1

有可能是一個更好的選擇，在那裏，但我覺得這是我的眼睛一個完美的解決方案。

我給視頻#video-background a scale(1.09)這將放大視頻，以便稍微刪除邊框。

我還將此添加到html和body以禁用該視頻。這是可選的，但沒有它的話你將會有下邊框。

html, body { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    margin: 0; 
    padding: 0; 
} 

的css爲您的視頻，

#video-background { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden; 
    transform: scale(1.09); 
    -webkit-transform: scale(1.09); 
    -moz-transform: scale(1.09); 
    -o-transform: scale(1.09); 
} 

最後，這裏是JSFIDDLE展示它的外觀。在該網址中，刪除/show以查看代碼。