在动态模式下限制 VideoJS 中的高度

Question

我正在使用videojs并设置流体：true它涵盖了整个宽度，这正是我想要的。现在的问题是它会改变播放器的高度，并且对于不同的视频是不同的。我希望它的最大为 500 像素。在这里，您可以实时检查我所做的事情。

Answer 1

我也有类似的问题。我们的视频已经非常定制了，所以这些规则可能对你来说还不够，但这就是我所做的。这是超级黑客，因为需要覆盖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;
}