如何以响应方式将 Video JS 播放器限制在屏幕高度的一小部分？

Question

我试图在彼此下方显示多个 Video JS 播放器。就像一个 table 有 3 行，每行包含一个 JS 播放器。播放器应该适合屏幕的整个高度和宽度，这样您就可以同时完全看到所有 3 个播放器（无滚动）。

问题是我找不到一种方法在响应时将它们限制在屏幕高度（使用 'auto' 值作为高度和宽度）。玩家似乎完全忽略了任何高度限制，只关心缩放以完全适应宽度并保持纵横比。

我尝试了 this 方法，但它完全适合允许的宽度并忽略任何高度限制以适合 video-js css class 的纵横比。

作为示例显示的 vjs-fill css class here 可能可以做我想做的事，但它似乎并不作为视频 JS css 文件。

那么，我的问题是：
有没有一种方法可以将 Video JS 播放器的高度限制为屏幕高度的一小部分，同时还能使其响应？
如果不是：
您知道可以做到这一点的嵌入式视频播放器吗？

Answer 1

您可以使用 vh（视口高度）单位。这是一个 divs 的例子：

div {
  width: 100%;
  height: 30vh;
}
.first {
  background-color: red;
}
.second {
  background-color: orange;
}
.third {
  background-color: pink;
}

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

链接：

VH Support

More infos on units

Answer 2

您还应使用 CSS3 calc() 作为 CSS 单位值。这是一个 div 的例子，来自@Mehdi Brillaud

的参考

div.wrapper {
   width: 97%;
   height: 90%;
   position: absolute;
}
div.child {
   width: calc(100% - 2em);
   height: calc(100% - 66%);
   margin: 0 auto;
}
.first {
   background-color: red;
}
.second {
   background-color: orange;
}
.third {
   background-color: pink;
}

    <div class="wrapper">
      <div class="first child"></div>
      <div class="second child"></div>
      <div class="third child"></div>
    </div>

链接：

calc() Support

calc() on css-tricks

calc() on css3clickchart

如何以响应方式将 Video JS 播放器限制在屏幕高度的一小部分？

How to limit Video JS player to a fraction of screen height in a responsive way?

css

video

responsive-design

html5-video

video.js