HTML5 视频适合宽度或高度

Question

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

I want the video to scale to fit either width or height so that I can always see the whole video without crop, filling the closest ratio (adding empty space to sides if window ratio is lower).

I can't figure out how to do this however.
First any height value, % or px, seems to be disregarded, I can't set the size at all using height, only width. Same for min-width/height.

How can this be done?

My code:

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

Video is loaded by javascript where v is a video link from an array:

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

Answer 1

Try wrapping the value inside quotes

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

you can add these class

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

.videoContainer video
{
  min-width: 100%;
  min-height: 100%;
}

Or alternatively use this

video {
  object-fit: cover;
}

Answer 2

Solved it myself with a 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 3

There's a great auto width/height trick called intrinsic ratios that can be used on images/videos and the likes! The trick is to have your desired element in a wrapper that then has a percentage-valued padding applied to it.

Your markup would then be:

<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 dimensions of your video container by playing with min-width or max-width of the .video-wrapper styles.

Hope this helps!

Answer 4

I had a similar problem. I have made a `slideshow' with various objects as slides, some of them are videos of various sizes. I did not found any conceptual solution, so I have found a trick.

I have explicitely specified all real video sizes in tags and collected the information of 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 (when necessary) I define the window size 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 rescale a rectangle into another rectangle we have to find a minimal 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);
    }
}

Unfotunately, here appeared some extra space; in FireFox I have found its minimal value as 5 that I negate form windows height value (iH) as the new video size.

Answer 5

Duplicate issue on the height posted at HTML5 Video dimensions in Safari IOS

Pure CSS solution provided in: https://stackoverflow.com/a/60878701/2486998

Answer 6

You can add style:

object-fit: contain;

Answer 7

In Angular if video player (shaka player in my case) is a separate component, this works perfectly (either height or width of container will cause resize of the player)

HTML

 <div id="videoContainer"        
      class="videoContainer">
   <video id="videoPlayer"></video>
 </div>

CSS

.videoContainer
{
   height:100%;
   width:100%;
}

.videoContainer video
{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}