HTML Video does not occupy 100% width

Question

I cant get the video to scale to 100% of the width of the .video container. Something like this but only such that the video occupies a max-height of 50vh.

Is it possible to do that? If yes, could you please tell me how?

body {
  margin: 0;
}

.container {
  height: 100vh;
  position: relative;
}
.container .video {
  position: absolute;
  height: 50vh;
  width: 100%;
}
.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  height: 50vh;
  width: 100%;
}

<div class="container">
  <div class="video">
    <video muted autoplay loop>
      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer 1

Videos are commonly encoded with the AR (Aspect Ratio) of 16:9 (16 width to it's 9 height).

• Set video element to:

    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
  

• That should make it be able to stretch at it's maximum length

• Then apply this to the container:

      position: relative;
      height: 0;
      width: 100%;
      padding-bottom:56.25%;
  

• This will collapse itself, and expand at the same time. The strangepadding-bottom value will act like ceran wrap over a plate of food. This combo of styles is responsive and pretty well established.

SNIPPET

body {
  margin: 0;
}

.container {
  height: 100vh;
  position: relative;
}
.container .video {
  position: absolute;
  height: 0;
  width: 100%;
  padding-bottom:56.25%;
}
.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
}

<div class="container">
  <div class="video">
    <video muted autoplay loop>
      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
    </video>
  </div>
</div>