使不同大小的視頻適合全屏嗎？

Question

使每一個頁面加載時加載的隨機webms全（瀏覽器）屏幕的站點。問題是我有各種尺寸的視頻（人像，廣場，寬屏等），不知道如何讓它們都播放而不會過多播放。

基本上，我想他們都全屏播放，肖像視頻播放屏幕中央，因此它可以清楚地看出，方可以，只要其清晰等等。這裏是我給出的CSS捉襟見肘。

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%); 
} 

你很接近，但這應該爲你做它。