Fullscreen HTML5 Section Background Video

问题

I tried to make Full screen HTML5 Section Background Video with css and HTML5 and found many articles, but not all with same concept.

The problem is that all the articles make the video with position: fixed; that make the video scroll with you. I need to found a way to make the video in the first section in the site only like this site.

The General Concept is :

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

i make live example to test ur comments please check here

回答1:

Wrap the video inside a div like this and increase z-index of content,let me know if this works..

    #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>

回答2:

try the code of @aditya with an

overflow-y: hidden;

on the container

来源：https://stackoverflow.com/questions/22174073/fullscreen-html5-section-background-video