网站开发

将视频做为网页背景

BY:微米云

|

浏览量:

想要实现这种效果很容易,只需要懂得H5的video, 按照我的步骤一步一步来就可以了~
首先要制作我们的页面,用到的是html5的新标签video
html :
<video autoplayloopposter="polina.jpg"class="bgvid"id="bgvid">
<source src="http://*****/video/video621.mp4" type="video/mp4">
</video>
css样式也没有什么好说的,只是要让视频充满屏幕、循环、无声、直接播放、隐藏按钮和不重复就可以了。
css:
body{
background-color:gray;
background:url("http://****/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;}

视频背景
用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局)html代码:

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


标签:


上一篇:暂无
下一篇: 如何优化网页的打印样式