6

I am working with videojs and set fluid:true It covers the full width, which is exactly what I wanted. Now the issue is it changes height of player, and it is different for different videos. I want it to be maximum 500px. Here you can check it live what I have done.

sheldon cooper
  • 455
  • 2
  • 8
  • 22

1 Answers1

15

I had a similar problem. Our video was already pretty customized, so these rules may not be enough for you, but here's what I did. It's super hacky, due to needing to override 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;
}
Rod
  • 2,226
  • 22
  • 21
Christopher Davies
  • 4,461
  • 2
  • 34
  • 33
  • 1
    Personnally I lose the ratio of the image video with this solution :( – Vincent Vidal Jun 06 '18 at 12:56
  • 1
    This works perfectly still except for I had to remove the comma at the end of `video.vjs-tech` when I put it in my CSS. Not sure if that's just me using standard CSS though. Otherwise works great and doesn't stretch the video content or anything weird like that. – Todd Rylaarsdam Apr 09 '22 at 02:09
  • FYI I had the same experience as @ToddRylaarsdam so I edited the code block in the answer to remove the extraneous comma. Assuming that edit isn't reverted Todd's comment _was_ accurate but that comma has been removed. Noting this change just in case anyone is confused. – Rod Aug 16 '22 at 17:45