バナーにhtml5ビデオを収める方法

Question

バナーのフル幅と高さに合わせる必要があるバナーにビデオを追加しようとしています。

video { 
    display: block; 
    width: 100%; 
    height: 566px; 
    z-index: -100; 

} 
.banner{ 
    width: 100%; 
    height: 566px; 
    background: red; 
    overflow: none; 

} 

の作業フィドル：何やっていることは

Htmlの

<div class="banner"> 
    <video> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    </video> 
</div> 

CSS従っているFiddle

しかし、ビデオを

Answer 1

使用object-fit: cover：

video { 
    display: block; 
    width: 100%; 
    height: 566px; 
    z-index: -100; 
    object-fit: cover; 
} 

あなたが幅を設定する必要がJSFiddle

Answer 2

video { 
    display: block; 
    width: 100%; 
    height: 566px; 
    z-index: -100; 
    background: cover; 
    overflow: none; 
} 

がうまく働いたバナーに適合していませんちゃん背景は「カバー」になりました。

http://fiddle.jshell.net/ypL0eym8/11/

** EDIT **

NVM、代わりにthis答えを取ります。私は "オブジェクトフィット"を知らなかったし、はるかに優れています。

Answer 3

を参照してください：自動;それあなたの問題を解決

video { 
    display: block; 
    width: auto; 
    height: 566px; 
    z-index: -100; 

} 
.banner{ 
    width: 100%; 
    height: 566px; 
    background: red; 
    overflow: none; 

} 

Jsのフィドルデモ http://fiddle.jshell.net/ypL0eym8/7/