使用简短的视频来替换以往的静态图片，可以使信息展现的更为丰富，也能给人们留下比较深刻的印象。
注意考虑因素：
- 视频应该设置为
autoplay，但默认情况下应设为静音，或者不应该包括声音。 - 视频应该显示是回落至浏览器不支持 HTML5 的静态背景图像的图像占位符。占位符图像也将在移动设备上使用背景，因为大多数的手机和平板电脑都不支持
autoplay。Apple也在 WWDC17上 禁用了autoplay 属性。 - 长度需要注意：太短视频能感觉到重复（像大多数这类的视频将设置为循环播放），时间太长而成为叙事归本身，因此值得要一个单独的设计元素。建议大约12-30秒的时长。
- 可访问性是很重要：在视频上放置任何文本应在高对比度。用户应当能够轻松访问到 UI 控件以暂停视频;理想情况下，视频播放所要经过只有一次。
- 带宽是一个大问题。视频需要较小，而且尽可能有效地压缩。同时，它需要在不同的设备和他们相关的屏幕之间进行缩放。尽量保持视频大小小于 5 MB，理想情况下500KB左右为佳。
一、使用HTML5代码插入视频
<video autoplay loop poster="images/moon.jpg" id="moon"> <!--id保持一致--> <source src="images/moon.webm" type="video/webm"> <source src="images/moon.mp4" type="video/mp4"> </video>
二、全屏视频代码，引入CSS中
video#moon { /*id保持一致*/
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}注意：
对于不支持 HTML5 的浏览器，使用判断：
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->之后还需将 video 标签插入到CSS中，来声明 video 是元素：
video { display: block; }三、对于移动端的优化
特别是 iOS系统的设备，会拒绝HTML5视频的播放，需要用图片缩放来处理
将以下代码插入至CSS：
@media screen and (max-device-width: 800px) {
html {
background: url(moon.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}这样就完成视频做网页背景的任务了！
