javascript - HTML5 视频适合宽度或高度

Question

width=100% height="auto" 缩放我的视频以适应浏览器窗口的整个宽度，但如果窗口的高度低于纵横比，视频将被裁剪在高度上。

我希望视频可以缩放以适应宽度或高度，这样我就可以始终看到整个视频而无需裁剪，并填充最接近的比例(如果窗口比例较低，则在两侧添加空白区域)。

但是我不知道该怎么做。
首先，任何高度值(% 或 px)似乎都被忽略了，我根本无法使用高度设置尺寸，只能使用宽度。最小宽度/高度相同。

如何做到这一点？

我的代码:

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

视频由 javascript 加载，其中 v 是来自数组的视频链接:

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

Answer 1

尝试将值括在引号内

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

你可以添加这些类

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

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

或者使用这个

video {
  object-fit: cover;
}