全高视频 - 在浏览器窗口正下方放置内容答案

【问题标题】：Full height video - drop content after right below browser window全高视频 - 在浏览器窗口正下方放置内容
【发布时间】：2016-01-24 22:47:35
【问题描述】：

我正在尝试通过视频实现与此处所示相同的功能：http://www.bootply.com/108614

视频应该占据整个浏览器窗口的大小，当用户向下滚动时，他会立即看到其他内容。显然你不能将视频作为 CSS 背景并使用计算高度，所以需要找到另一个解决方案。

对解决方案有帮助吗？

【问题讨论】：

你自己有没有尝试过？
是的，我确实尝试了多种不同的方法。现在我找到了如何实现它的解决方案。

标签： javascript css fullscreen viewport

【解决方案1】：

我找到了解决方案，通过使用 javascript 计算视口高度。

HTML

<div class="head">
 <div class="video-content">
  <video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid">
   <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
  </video>
 </div>
</div>

<div class="content">
 here is content
</div>

CSS

.welcome {
 height: 100%;
}
.content {
 width: 100%;
 height: 500px;
 background: yellow;
}
video#bgvid { 
 position: absolute;
 top: 50%;
 left: 50%;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 -ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
}

JAVASCRIPT

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.head').css('min-height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

Working example in JSFIDDLE

【讨论】：