Reduce video size based on viewport height

[fiveohfiveoh]

Thanks for an awesome plugin! I wondered if there's a way to shrink the size of a video based on both the width and height of the viewport, rather than just the width?

So that if a user has a 'short' browser window, the video will shrink in size so that the full height of the video is displayed, rather than get cut off.

Here is a video example of the issue:
https://user-images.githubusercontent.com/67900507/111027123-1f8d4200-83e6-11eb-84ab-801b51e18a85.mov

You'll see at 0.08 the video is cut off when the browser window reduces in height.

An example of the exact functionality I'd like to replicate can be seen by watching a stream on Twitch.tv and reducing the height of the browser - the video shrinks all the way down and doesn't get cut off.

Here is my code:

  <div className="flex flex-col w-0 flex-1 overflow-hidden">
    <RoomTopbar />        
    <div className="flex items-center justify-center">        
      <div className="w-full xl:w-9/12">          
        <div className="aspect-w-16 aspect-h-9">            
          <video className="outline-none" controls>              
            Your browser does not support the video tag.                
          </video>           
        </div>            
      </div>          
    </div>        
  </div>     
</div>

Any help greatly appreciated 🙏😀

[adamwathan]

Hey! I would do something with max-height and vh units, but the exact details would depend on your design. Tailwind includes max-h-screen which could be helpful here, or you could add a custom value for something like max-h-90vh or whatever makes sense for your project. That will make sure the video is never taller than 90% of the browser height.

Hope that helps!