css - 全屏视频，允许滚动

我正在一个网站上，用户首先看到的是视频。我希望该视频全屏显示，但也允许滚动。

像这样：http://wearefetch.com/

如您所见，视频是全屏的，但您也可以向下滚动。

我在网上搜索了一下，但没有发现任何特别有用的信息。如果有人可以向正确的方向推动我，我将不胜感激。

最佳答案

尝试这个

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}

的HTML

<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>

如果屏幕宽度小于800px

@media screen and (max-device-width: 800px) {
html { background: url(polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

visit here for more details