用视频做网页的背景

发表于 | 分类于

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

结构

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

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