<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style type="text/css">
*{margin: 0;padding: 0;}
h1{margin: 50px auto;width: 300px;}
video{
position: fixed;
z-index: -1;
object-fit: cover;
width: 100%;
height: 100%;
}
/*object-fit:cover 的裁剪方式和 background-size:cover 的完全相同，不过它是
用来为 imgs、videos 和其他的媒体标签设置样式的，而不是给背景图片设置样式。*/
</style>
</head>
<body>
<video autoplay loop poster="http://yuxiedu.org.cn/index3/ppp.png">
<!--自动播放 循环播放 带有预览图-->
<source src="http://yuxiedu.org.cn/index3/pp.mp4 " type="video/mp4"></source>
<source src="http://yuxiedu.org.cn/index3/pp.ogg" type="video/ogg"></source>
</video>
<h1>用视频当背景</h1>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 把视频当背景
前端ABC