Question

我尝试用css和HTML5制作全屏幕HTML5截面背景视频并发现了很多文章，但并非所有文章都有相同的概念。

问题是，所有文章都会制作带position: fixed;的视频，让视频随您滚动。我需要找到一种方法在网站的第一部分中制作视频，例如this site。

一般概念是：

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

HTML：

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

CSS：

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; 
}

我制作实例以测试您的评论，请查看here

Answer 1

将视频包含在这样的div中并增加内容的z-index，如果有效，请告诉我..

    #video_container {
     bottom: 0;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     background: url(polina.jpg) no-repeat;
     min-height: 720px;
    }
   #bgvid {
     min-width: 100%;
   }

<div id="video_container" style="overflow:hidden; background-size:cover;">
    <video autoplay loop id="bgvid">
       <source src="polina.webm" type="video/webm">
        <source src="polina.mp4" type="video/mp4">
   </video>
 </div>

Answer 2

使用

尝试@aditya的代码

overflow-y: hidden;

容器上的

全屏HTML5部分背景视频

2 个答案: