css - 当窗口大小改变时使 videoJS 实例缩放

Question

这是一个非常基本的问题，但我已经研究了好几天都没有成功。

我有一个 Electron 桌面应用程序，它允许用户选择要播放的本地视频。我希望能够为视频指定一个 div 并将视频的大小按比例(例如保持纵横比)限制为该 div 的大小。如果用户更改窗口的大小，例如通过使应用全屏显示，我还需要视频比例。

到目前为止，我已经能够让视频居中，但是当窗口大小发生变化时，视频保持相同大小(下图)。

我尝试添加 videojs CSS 类(vjs-16-9、vjs-4-3)并尝试使用 data-setup='{"fluid": true} ' 但这些会导致视频占据整个窗口。

所以要点:我如何指定我希望视频高度占据屏幕的一定百分比——比如 40%，让它为其宽度解析适当的宽高比，然后什么时候窗口大小改变，是否重新计算？

---

   .video-center {
      margin-left: auto !important;
      margin-right: auto !important;
      height: 100%;
    }

---

  <div class="videocontent">
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center"  controls>
    </video>
  </div>

窗口模式:

全屏模式:

Answer 1

如果我理解您的最终目标，您想要绝对定位视频并使用父级创建将模仿视频宽高比的填充。

.videocontent {
  position: relative;
  height: 0;
  padding-top: 56.25%; /* divide the video height by the width to get this percentage */
}
.videocontent video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

<div class="videocontent">
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center"  controls>
    </video>
</div>