流体モードのvideojsの高さを制限します

Question

私はvideojsで作業しており、流体を設定します流体：true これは完全に私が望むものです。 問題はです。プレーヤーの身長はに変更されています。これは動画によって異なります。私はそれが最大500pxになりたい。 Hereあなたはそれが私が何をしているかを確認することができます。

Answer 1

私は同様の問題がありました。私たちのビデオはすでにかなりカスタマイズされているので、これらのルールでは十分ではないかもしれませんが、ここで私がしたことがあります。

/* Make the video relative, instead of absolute, so that 
    the parent container will size based on the video. Also, 
    note the max-height rule. Note the line-height 0 is to prevent 
    a small artifact on the bottom of the video. 
*/ 
.video-js.vjs-fluid, 
.video-js.vjs-16-9, 
.video-js.vjs-4-3, 
video.video-js, 
video.vjs-tech, { 
    max-height: calc(100vh - 64px); 
    position: relative !important; 
    width: 100%; 
    height: auto !important; 
    max-width: 100% !important; 
    padding-top: 0 !important; 
    line-height: 0; 
} 

/* Fix the control bar due to us resetting the line-height on the video-js */ 
.vjs-control-bar { 
    line-height: 1; 
}