尝试将值括在引号内

<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;
}

型

我自己用JavaScript函数解决了这个问题：

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;
    }

};

字符串

在Angular中，如果视频播放器（在我的例子中是shaka播放器）是一个单独的组件，这可以完美地工作（容器的高度或宽度都会导致播放器的大小调整）
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%;
}

型

有一个很好的自动宽度/高度技巧，叫做intrinsic ratios，可以用在图像/视频等上！这个技巧是把你想要的元素放在一个 Package 器中，然后给它应用一个值填充。
您的标记将是：

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

字符串
你的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 */
}

型
您可以通过使用.video-wrapper样式中的min-width或max-width来限制视频容器的尺寸。
希望这有帮助！

我也有类似的问题。我做了一个“幻灯片”，用各种各样的对象作为幻灯片，其中一些是各种大小的视频。我没有找到任何概念上的解决方案，所以我找到了一个技巧。
我在标签中明确指定了所有真实的视频大小，并收集了所有这些视频的信息：

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);
}

字符串
然后（必要时）我定义窗口大小如下：

// 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;

型
要将一个矩形重新缩放为另一个矩形，我们必须找到一个最小比例：

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);
    }
}

型
不幸的是，这里出现了一些额外的空间;在Firefox中，我发现它的最小值为5，我否定窗体窗口高度值（iH）作为新的视频大小。

在HTML5 Video dimensions in Safari IOS上发布的高度上存在重复问题
提供的纯CSS解决方案：https://stackoverflow.com/a/60878701/2486998

您可以添加样式：

object-fit: contain;

字符串

我在用户代理样式表中发现了这个样式设置，当直接在地址栏中打开mp4时：

style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
       max-height: 100%; max-width: 100%; margin: auto;"

字符串
只需将其添加到HTML中的视频标签中或任何您想要的内容中。
在Chrome和Edge中对我有效。

感谢qfactor77's answer，我被引导到*PERFECT*解决方案。它适用于宽度和高度，变得都**大于或小于视频的实际尺寸，以适应您将其放入的任何容器，而高度永远不会成为问题。

<div class="videoContainer">
  <video class="video" ... />
</div>

个字符
就这样你不需要别的东西

**注意：**Chrome会自动将object-fit: contain;应用于video元素，因此您可以忽略它。但我还是将其包含在内，以确保在浏览器不应用它时也能应用它。
**提示：**使用object-fit的其他值可以给予不同的结果，以确定视频如何放入其容器中。