用视频做网页的背景

用视频做背景图的简单方法。

结构

1
2
3
4
<video autoplay loop poster="videobg.jpg" id="bgvid">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

样式

1
2
3
4
5
6
7
8
9
10
11
12
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;
}

速度优化会有影响,请审慎明智的使用。