『html5、css3』將視頻做為網頁背景 超炫！

github項目地址：https://github.com/Ethan997/Video-background-page

想要實現這種效果很容易，只需要懂得H5的video， 按照我的步驟一步一步來就可以了~

首先要制作我們的頁面，用到的是html5的新標簽video

html :

<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid">

<source src="http://cdn.moji.com/websrc/video/video621.mp4" type="video/mp4">

</video>

 css樣式也沒有什么好說的，只是要讓視頻充滿屏幕、循環、無聲、直接播放、隱藏按鈕和不重復就可以了。

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;

}

來源：https://blog.csdn.net/weixin_33696822/article/details/89661294