"Html5, css3" video as the page background stunning!

github project Address: https://github.com/Ethan997/Video-background-page

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;

}

Source: https: //blog.csdn.net/weixin_33696822/article/details/89661294