Html5ビデオ応答セクション

Question

サイトのメインセクションに追加したビデオがあります。寸法は1920 x 1080です。高さを100vhにすると、側面が100％幅ではないという問題があります。

高さを100％とすると、ブラウザのvhを過ぎてしまい、応答が小さくなります。

彼らはここにこのビデオを持っている方法は、私はあなたに何が起こっている

http://www.welcometofillory.com/

.container video { 
    height: 100% !important; 
    width: 100% !important; 
    overflow: hidden; 
    } 

<div class="container"> 
<video id="my-video" preload="auto" loop style="width: 1920px; height: 1080px;" width="100%" height="100%"> 
<source src="landing-video.mp4" type="video/mp4"></source> 
</video> 
</div> 

Answer 1

を達成しようとしているものですビデオは常に比例拡大されますので、正しいです。それを100vh（全体の高さの高さ）に追加すると、関係は16：9のようにキャンバスから外れます。

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> 
</div> 

それとも単に映像が限界を超えて行くことを許可していないことへのラッパーを追加します。

は、私はあなたが、ブートストラップの応答ビデオを使用することをお勧めします。

.container { 
    width:100%; 
    height: 100vh; 
    overflow: hidden; 
} 
video{ 
    height: 100vh; 
    width: auto; 
} 

これがあなたを助けたかどうか教えてください。それ以外の場合は、質問に仕様を追加してよりよく理解してください。