Ограничить высоту в videojs в режиме жидкости

Question

Я работаю с videojs и устанавливаю Fluid : 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;
}