How to make video responsive for all the screen sizes?

Question

First of all, the video is kinda scaled and I'd love it to fit in the whole screen. Besides that, I can't figure out how to make video responsive on all screen sizes.

HTML

<div class="spread-video">
  <video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
  </video>
</div>

CSS

.spread-video {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Does anybody know how to achieve this? Thank you in advance!

Answer 1

Target the <video> instead of the parent div, see fiddle: https://jsfiddle.net/m1pz6zcu/4/

.spread-video > video {
  width: 100%;
}

Since the aspect ratio of the video is different from that of the view port, a work around for the issue is to make the video width bigger then the viewport width, center it and hide the overflow. See fiddle: https://jsfiddle.net/m1pz6zcu/6/

.spread-video > video {
  width: 200%;
  margin-left: -50%;
}
.spread-video{
  overflow: hidden;
}