css - 使视频标签垂直适合窗口

Question

我试图限制视频元素的查看区域，使其不会流过屏幕底部(它应该与我在顶部的调光层大小相同)。

因此，如果视口(viewport)为 1440x600，则视频也应为 1440x600。我添加了 overflow:hidden;，afaik 应该可以解决这个问题。

CSS/HTML:

body {
  margin: 0;
  height: 100%;
}

.top {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.top video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
}

.dimmer {
  background-color: black;
  opacity: 0.50;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

<div class="top">
    <div class="dimmer"></div>
    <video autoplay loop muted>
        <source src="http://media.3daysawake.com/water-480p.mp4" type="video/mp4">
    </video>
</div>

http://jsfiddle.net/sp76wL8x/4/

Answer 1

您可以使用基于视口(viewport)宽度和视口(viewport)高度的 vh 和 vw 属性。

在这种情况下，我认为您只需要 vh。

如果我没理解错的话，视频的高度应该是屏幕的高度，宽度应该相应调整。为此，您可以将高度设置为 100vh(视口(viewport)高度的 100%)。

你可以玩这个，也可以设置宽度或最大宽度。有趣的是，您可以相对于高度表示视频的宽度，例如 min-width: 130vh 使视频的宽度至少为视口(viewport)高度的 130%。

height: 100vh;
min-width: 130vh;