Billy Logan Billy Logan - 1 year ago 86
HTML Question

How to make video responsive for all the screen sizes?

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.


<div class="spread-video">
<video src="" autoplay="" loop="">


.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 Source

Target the <video> instead of the parent div, see fiddle:

.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:

.spread-video > video {
  width: 200%;
  margin-left: -50%;
  overflow: hidden;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download