如何将html5视频拉伸至全高？

Question

我有一个简单的html5视频播放器。我想将视频高度拉伸到用户屏幕高度。

我尝试了很多东西，例如这个：

    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */

但它不起作用。这里有一个生动的演示：

http://boxy2.com/testvideo.php?url=http://boxy2.com/3n9?download_token=e99fdb10c5a929aa30d0f497d07f260eb16b511503b4520a4bdd48385b048b88&ad=0

当我点击全屏时，这是我的问题，它只跟随WIDTH属性，而不是高度。如果我删除宽度：100％，而不是它的＆＃39;即使在全屏幕上，尺寸也大约为300px。

Answer 1

现在使用的正确解决方法是通过<div class="sub"> <form action="side2.html"> <button type="submit" class="Button">About us</button> </form> <form action="buynow.html"> <button type="submit" class="Button">Buy now</button> </form> </div> 标记上的CSS使用<div class="sub"> <a href="side2.html" class="Button">About us</a> <a href="buynow.html" class="Button">Buy now</a> </div> 。

object-fit:fill

Answer 2

CSS

video { height: 100vh; min-height: 100%; }

大多数视频的比例为16：9，因此为了增加屏幕​​边缘的高度，最终会出现裁剪视图。与您想要的最接近的比例是4：3的旧电视格式。

vh和vw是viewport height and viewport width.

上的布局救生员

Answer 3

如果您正在寻找一个始终涵盖内容区域的全高度sol'n：

demo

HTML

<header role="banner">
  <div id="wrapper-video">
    <video poster="" autoplay loop>
      <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4"           
        type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
    </video>
  </div>
</header>

CSS

section[role="banner"] {
  position: relative;
  width: 100%;
}
#wrapper-video {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -100;
}
#wrapper-video video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

编辑 - 在Opera中工作