HTML5 video guide width or height

Question

width=100% height="auto" scales my videos to fit the width of the browser window, but if the window height is lower than the aspect ratio, the video is cropped in height.

I want the video to scale both in width and in height, so that I can always see all the videos without crop, filling the closest ratio (adding empty space to the sides if the window ratio is lower).

I can’t figure out how to do this.
The first value of the height,% or px, does not seem to be taken into account, I can not set the size at all using the height, only the width. Same thing for min-width / height.

How can I do that?

My code is:

 <video id="video" width=100% height="auto" onclick=playPause()></video> 

The video is loaded with javascript, where v is the link to the video from the array:

 video.addEventListener('play', function() { v.play();}, false); 

Answer 1

Solved it on my own using javascript function:

 window.addEventListener('resize', resize, false); video.height = 100; /* to get an initial width to work with*/ resize(); function resize() { videoRatio = video.height / video.width; windowRatio = window.innerHeight / window.innerWidth; /* browser size */ if (windowRatio < videoRatio) { if (window.innerHeight > 50) { /* smallest video height */ video.height = window.innerHeight; } else { video.height = 50; } } else { video.width = window.innerWidth; } }; 

Answer 2

Try to wrap the value inside quotation marks

 <div class="videoContainer"> <video id="video" width="100%" height="auto" onclick="playPause();"></video> </div> 

you can add these classes

 .videoContainer { position:absolute; height:100%; width:100%; overflow: hidden; } .videoContainer video { min-width: 100%; min-height: 100%; } 

Or alternatively use

 video { object-fit: cover; } 

Answer 3

There is a big trick of the width / height of the car, called internal coefficients , which can be used on images / videos and the like! The trick is to have the right element in the wrapper, which then has a percentage addition .

Your markup will be as follows:

 <div class="video-wrapper"> <video class="video" id="video" onclick=playPause()></video> </div> 

And your CSS:

 .video-wrapper { position: relative; padding-bottom: 20%; height: 0; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ccc; /* Random BG colour for unloaded video elements */ } 

You can limit the size of your video .video-wrapper playing with min-width or max-width of .video-wrapper styles.

Hope this helps!

Answer 4

I had a similar problem. I made slide shows with various objects in the form of slides, some of them are videos of different sizes. I did not find a conceptual solution, so I found a trick.

I clearly indicated all the real sizes of the video in the tags and collected information about all of them:

 var vids = document.getElementsByClassName("vid"); // videos var vidl = vids.length; var vidH = [ ]; var vidW = [ ]; // Get original widths and heights of videos for (i=0; i<vidl; i++) { // > vidH.push(vids[i].height); vidW.push(vids[i].width); } 

Then (if necessary) I determine the size of the window as follows:

 // Current inner height of the browser window (in pixels) var iH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // Current inner width of the browser window (in pixels) var iW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 

To recolor a rectangle into another rectangle, we need to find the minimum scale:

 var r, rh, rw; // Scale videos to fit window for (i=0; i<vidl; i++) { // > rh=iH / vidH[i]; rw=iW / vidW[i]; r=Math.min(rh, rw); if (rh>rw) { vids[i].height=Math.floor(vidH[i]*r); vids[i].width=iW; } else { vids[i].height=iH-5; vids[i].width=Math.floor(vidW[i]*r); } } 

Unfortunately, some additional space has appeared here; in FireFox I found my minimum value as 5, that I deny the window height (iH) value as the new video size.