在流体模式下限制videojs的高度

Question

我正在使用 videojs 并设置Fluid:true 它覆盖了整个宽度，这正是我想要的。现在的问题是它改变了播放器的高度，并且对于不同的视频它是不同的。我希望它最大为 500px。 在这里你可以实时查看我所做的事情。

Answer 1

我有类似的问题。我们的视频已经是相当定制的，因此这些规则可能对您来说还不够，但这就是我所做的。这是超级 hacky，因为需要覆盖 CSS：

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