为什么我的 H.264 视频的尺寸比浏览器窗口小，但仍有溢出？答案

【问题标题】：Why is there overflow for my H.264 video even though its dimensions are smaller than the browser window?为什么我的 H.264 视频的尺寸比浏览器窗口小，但仍有溢出？
【发布时间】：2022-01-10 11:12:48
【问题描述】：

我有一个 1280x720 视频（AAC、H.264，以防它很重要）
我的浏览器窗口是 1440x764
我有以下 CSS：

#original-video {
  position: absolute;
  top: 0;
  left: 0;
}

和以下 HTML

<body>
  <video id="original-video" width="1280" height="720" playsinline>
    <source src="/db/original.mp4" type="video/mp4">
  </video>
<body>

然而，当视频在页面上渲染时，会出现垂直和水平溢出。这是没有意义的，因为视频的宽度和高度应该小于窗口的宽度和高度。

如何解决这个问题并让视频适合窗口？

编辑：我认为这是因为视频的高分辨率。尽管它“说”它是 1280x720，但渲染的尺寸实际上更大。但我不知道如何解决这个问题。

【问题讨论】：

标签： html css html5-video

【解决方案1】：

将 CSS 更改为：

#original-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 77.2223%;
}

按比例调整视频大小以适合我的 1440x764 窗口。

所以这确实是由于视频的分辨率更高。

但我不知道这是否是解决此问题的正确方法，因此我暂时将其添加为答案，同时等待更有经验的人确认或提出更合适的解决方案。

【讨论】：

我也是这么想的。以 % 而不是 PX 为单位的宽度。