Question

我正在开发一个网站，用户看到的第一件事就是视频。我希望该视频是全屏的，但也允许滚动。

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

我在网上搜索了一下，但没有找到任何特别有用的东西。如果有人能够朝着正确的方向推动我，我将不胜感激。

Answer 1

试试这个

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

允许滚动的全屏视频

1 个答案: