javascript - HTML 视频调整大小以始终适合

Question

我正在寻找一种简单的解决方案，既能始终保持视频的宽高比，又能使视频的宽度和高度始终适合浏览器窗口。

到目前为止，我发现的所有解决方案都只适合宽度，但我还需要适合高度。 :

Answer 1

Bootstrap做这个。诀窍是 CSS 底部填充是根据元素的宽度计算的。

.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%; /* calculate by aspect ratio (h / w * 100%) */
}
.video-container .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-container">
  <video class="video"></video>
</div>

参见 this example .它适用于 <embed> , <object> , <iframe> , 和 <video>标签。我的例子只是一个彩色的 <div>使其纵横比保持不变。