Question

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

Answer 1

我有类似的问题。我们的视频已经过很好的定制，所以这些规则对您来说可能还不够，但这就是我所做的。由于需要覆盖CSS，这是超级hacky：

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

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

1 个答案: