It is easy to want to achieve this effect, you only need to understand video H5, in accordance with the steps I go step by step on it ~
First of all to make our pages, it is used in the new video tag html5
html :
<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid">
<source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">
</video>
css style is also not much to say, just let the video to fill the screen, cycling, silent, direct play, hidden buttons, and not repeat it.
css:
body{
background-color:gray;
background:url("http://cdn.moji.com/websrc/video/video621.mp4") no-repeat center0px;
}
Video # bgvid {
position: fixed; right:0; bottom:0;
min-width:100%; min-height:100%; width: auto;height:
auto;z-index:-100; background-size: cover;
}
Background video
with a background video page, will vary with the size of the video window size change (response layout)
HTML Code:
<div class="bg-video">
<video class="v1" autoplay muted loop>
<source src="bg.mp4">
</video>
</div>
css代码：
.bg-video{
width:100%;
height:auto;
left:0px;
top:0px;
z-index: -1;
vertical-align:bottom;display:block;
position:absolute;
}
.v1{
width: 100%;
height: auto;
}