HTML5 video fit width OR height

Question

The width=100% height="auto" scales my videos to fit the whole width of the browser window, but if the height of the window is lower than the aspect ratio the video gets cropped in height.

I want the video to scale to fit either width or height so that I can always see the whole video without crop, filling the closest ratio (adding empty space to sides if window ratio is lower).

I can't figure out how to do this however.
First any height value, % or px, seems to be disregarded, I can't set the size at all using height, only width. Same for min-width/height.

How can this be done?

My code:

<video id="video" width=100% height="auto" onclick=playPause()></video>

Video is loaded by javascript where v is a video link from an array:

video.addEventListener('play', function() { v.play();}, false);

Answer 1

Try wrapping the value inside quotes

<div class="videoContainer">
   <video id="video" width="100%" height="auto" onclick="playPause();"></video>
</div>

you can add these class

.videoContainer
{
   position:absolute;
   height:100%;
   width:100%;
    overflow: hidden;
}

.videoContainer video
{
  min-width: 100%;
  min-height: 100%;
}

Or alternatively use this

video {
  object-fit: cover;
}