html - 没有栏的初始全屏视频

Question

我想使用一个视频标签来填充整个窗口，无论纵横比如何，都居中，并将所有其他内容下推到视频标签/容器下方。

在调整窗口大小时，视频应相应地调整大小。

我已经尝试了各种方法以及相对和绝对定位的组合，但没有任何效果。我确实找到了一个这样做的网站；

http://wearefetch.com/

但我还没弄明白他们是怎么做到的。

谢谢

Answer 1

根据他们的网站:

  <div class="video-wrap" style="width: 1251px; height: 1111px;">
    <meta content="Fetch">
    <meta content="Fetch video">
    <meta content="http://wearefetch.com/wp-content/uploads/2013/09/shutterstock_197472794.jpg"><video autoplay="" class="slider-video" height="700" loop="" preload="auto" style="visibility: visible; width: 2010px; height: 1131px;" width="1800">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.webm" type="video/webm">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.mp4" type="video/mp4">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.ogg" type="video/ogg"></video>
  </div>

其中 video-wrap 宽度和高度由 javascript 在窗口调整大小时计算。