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

Question

我试图显示多个视频JS播放器在彼此下面。就像一个3行的表，每行都包含一个JS播放器。玩家应该适应整个屏幕的高度和宽度，这样你就可以同时看到所有3个玩家(没有滚动)。

问题是，我无法找到一种方法将它们限制在屏幕的高度上，同时响应(使用“auto”值表示高度和宽度)。玩家似乎完全忽略任何高度限制，只关心缩放，以完全符合宽度和保持他们的纵横比。

我尝试了这方法，但它完全符合允许的宽度，并忽略了任何高度限制，以适应视频- class类的高宽比。

vjs填充css类显示为一个示例，这里可能可以做我想做的事情，但它似乎并不是作为视频JS文件的一部分而实际存在。

所以，我的问题是：

是否有办法将视频JS播放器的高度限制在屏幕高度的零头，同时也使其响应？

若否，则：

你知道一个能做到这一点的嵌入式视频播放器吗？

Answer 1

您可以使用vh (视口高度)单元。下面是div的一个示例：

​

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支撑

关于单位的更多信息

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()支助

关于css的calc()技巧

css3clickchart上的calc()