サイズの異なるビデオをフルスクリーンにしますか？

Question

ページがロードされるたびに、ランダムなWebmsをフル（ブラウザ）画面に読み込むサイトを作成する。問題は、私はさまざまなサイズのビデオ（肖像画、正方形、ワイドスクリーンなど）を持っていて、あまりにも多く切り取ることなくそれらをすべて再生させる方法を知らないことです。

基本的には、全員が全画面、肖像画のビデオプレイセンター画面を再生したいので、はっきりと見えるようにしてください。

html, body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
#my-video { 
 
    position: absolute; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

また、私はjqueryの-3.1.0を使用するように言われてきたが、私はそれがどのように動作するかわかりません。ありがとう！

Answer 1

このCodePen（ない鉱山）を参照してください：

https://codepen.io/dudleystorey/pen/knqyK

重要なCSS：

#video { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    transform: translateX(-50%) translateY(-50%); 
} 

あなたが接近していたが、これはあなたのためにそれを行う必要があります。