html5全屏把视频作为页面背景特效

一款html5全屏把视频作为页面背景特效，有两种特效的显示方式，一种时div区别视频背景，一种是全屏视频背景，喜欢的童鞋请收下吧。

分类：图片代码 > 背景图难易：初级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

两个效果的页面head部分引入了3个相同的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="dist/jquery.vidbacking.css">

div区域视频背景的指定CSS样式文件为style1.css，全屏视频背景的指定CSS样式文件为style2.css，代码如下：

<link type="text/css" rel="stylesheet" href="css/style1.css">
<link type="text/css" rel="stylesheet" href="css/style2.css">

页面的body部分也有所区别，具体看页面代码即能明白了，两段代码如下：

<div class="video-back">
	<video poster="assets/screenshot1.jpg" autoplay muted loop class="vidbacking">
		<source src="assets/Rallye.mp4" type="video/mp4">
	</video>
	<div class="htmleaf-demo center">
	  <a href="index.html" class="current">div区域视频背景</a>
	  <a href="index2.html">全屏视频背景</a>
	</div>
	<div class="clearfix"></div>
</div>

<div class="htmleaf-container">
	<video poster="assets/screenshot1.jpg" autoplay muted loop class="vidbacking">
	    <source src="assets/Rallye.mp4" type="video/mp4">
	</video>
	<div class="video-back">
	    <div class="htmleaf-demo center">
		  <a href="index.html">div区域视频背景</a>
		  <a href="index2.html" class="current">全屏视频背景</a>
		</div>
	    <div class="clearfix"></div>
	</div>
</div>

页面的底部代码也略有不同，代码如下：

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dist/jquery.vidbacking.js"></script>
<script type="text/javascript">
$(function(){
    $('.video-back').vidbacking();
});
</script>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dist/jquery.vidbacking.js"></script>
<script type="text/javascript">
$(function(){
    $('body').vidbacking({
        'masked': true
    });
});
</script>