Make video fit 100% with any screen resolution

Question

I have a video with the following properties, Frame width: 1920 and Frame Height: 1080. I need its width and height to be 100% thus filling up the whole screen. And it needs to be responsive too. So far, I have this code :

<video class="hidden-xs hidden-sm hidden-md hidden-custom videosize embed-responsive-item" autoplay="autoplay" loop="loop">     <source src="~/Videos/myvideo.mp4" type="video/mp4" /> </video> 

css:

   .videosize {     position:absolute;     z-index:-1;     top:0;     left:0;     width:100%;      height:100vh; } 

With the code above it fits perfectly with a 1680 x 1050 screen resolution, however with other resolution, it takes up 100% of the height then the width adjusts leaving white spaces on both sides.

Any idea ? Thanks.

Answer 1

Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG

So your CSS would be:

.video-container {   position: absolute;   top: 0;   bottom: 0;   width: 100%;   height: 100%;    overflow: hidden; } .video-container video {   /* Make video to at least 100% wide and tall */   min-width: 100%;    min-height: 100%;     /* Setting width & height to auto prevents the browser from stretching or squishing the video */   width: auto;   height: auto;    /* Center the video */   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%,-50%); } 

HTML:

<div class="video-container">   <video>     <source src="~/Videos/myvideo.mp4" type="video/mp4" />   </video> </div> 

Answer 2

You can now use the object-fit property. This property has been designed especially to manage responsive size for <img> and <video> elements. It is now supported by all modern browsers.

.videosize {     position: absolute;     z-index: -1;     top: 0;     left: 0;     width: 100%;      height: 100%;     object-fit: cover; }