ビデオフレームにフル幅を含めるように強制する

Question

フルスクリーン幅にしたいビデオフレームがあります。私はCSSで試してみましたが、フレームにはフル幅が含まれていると思っていました。ビデオが再生される領域がいっぱいではありません。

どのように私は、これは画面全体の幅が含まれて作るのですか？

以下は私のHTMLとCSS

.videoTrainings { 
 
    width: 100%; 
 
    height: 400px; 
 
    background: #fbfbfb; 
 
} 
 
.videoTrainings video { 
 
    width: 100%; 
 
    height: 100%; 
 
    max-width: 100%; 
 
}

<div class="videoTrainings"> 
 
    <video autoplay="autoplay"> 
 
    <source src="videos/tomprint.mp4" type="video/mp4"/> 
 
    </video> 
 
</div>

おかげです。あなたのCSS .videoTrainings videoからの高さを削除

Answer 1

は、トリック 参照@ReneのファンデLendeコメント

.videoTrainings video { 
    width: 100%; 
    max-width: 100%; 
}