カスタムの高さを維持しながらビデオの幅を100％にする

Question

私は100％の幅で、可変の高さのビデオ、例えば300pxをビデオに配置しようとしています。

私はビデオの縮尺を欲しない、私はビデオの下端がちょうど切断されたらしたいと思います。私はひどいイメージでこれを表示しようとします。

video { 
 
    position:relative; 
 
    z-index:-1; 
 
    width: 100%; 
 
}

<div id="container" align="center"> 
 
    <video autoplay> 
 
     <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/> 
 
    </video> 
 
</div>

オリジナルビデオ：カスタム高さと

--------------- 
|    | 
|    | 
|    | 
--------------- 

オリジナルビデオ：CSSで

--------------- 
|    | 
|    | 
--------------- 
| Cut off  | 
--------------- 

Answer 1

は、あなたの例では（コンテナDIVの高さを設定しました、有益には#containerと命名）およびoverflow:hidden：video要素はwidth:100%height:autoと（デフォルト）であるため

video { 
    position:relative; 
    z-index:-1; 
    width: 100%; 
} 
#container{ 
    height:300px; 
    overflow:hidden; 
} 

ビデオはまだ（アスペクト比）比例します。

300ピクセルでは、ビデオ要素がコンテナdivの下に広がり、（overflow:hiddenのために）切り捨てられます。