HTML Video does not occupy 100% width

I cant get the video to scale to 100% of the width of the .video container. Something like https://www.wealthfront.com/ does on their homepage 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>