title: How to limit Video JS player to a fraction of screen height in a responsive way?
body: <p>I'm trying to display multiple Video JS players below each other. Like a table with 3 rows and each row containing a JS player. The players are supposed to fit the full height and width of the screen, so that you can fully see all 3 players at the same time (No scrolling).   </p>
  
  <p>The problem is that I can't find a way to limit them to the height of the screen while being responsive (using the 'auto' value for the height and width). The players seem to completely ignore any height limitations and only care about scaling to fully fit the width and remain their aspect ratio. </p>
  
  <p>I tried <a href="http://coolestguidesontheplanet.com/videodrome/videojs/" rel="nofollow">this</a> approach, but it fits the allowed width fully and ignores any height limitations in order to fit the aspect ratio of the video-js css class. </p>
  
  <p>The vjs-fill css class shown as an example <a href="https://github.com/videojs/video.js/pull/1952" rel="nofollow">here</a> might be able to do what I want, but it doesn't seem to actually exist as part of  the Video JS css file.    </p>
  
  <p>So, my question:<br>
  Is there a way to limit the Video JS player height to a fraction the screen height while also making it responsive?<br>
  If not:<br>
  Do you know an embeddable video player that can do that?</p>