begrenzen Sie die Höhe in videojs im flüssigen Modus

Question

Ich arbeite mit videojs und setze Flüssigkeit: true Es deckt die volle Breite ab, die genau das ist, was ich wollte. Jetzt ist das Problem es ändert Höhe des Spielers, und es ist unterschiedlich für verschiedene Videos. Ich möchte, dass es maximal 500px ist. Here können Sie es live überprüfen, was ich getan habe.

Answer 1

Ich hatte ein ähnliches Problem. Unser Video war schon ziemlich angepasst, also sind diese Regeln vielleicht nicht genug für dich, aber hier ist was ich getan habe. Es ist super hacky, weil CSS überschrieben werden muss:

/* 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; 
}