演示地址：http://lab.yn137.com/upload/laboratory/html5video/index2.html

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

1. <link type="text/css" rel="stylesheet" href="css/normalize.css" />

2. <link type="text/css" rel="stylesheet" href="css/demo.css">

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

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

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

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

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

1. <div class="video-back">

2.    <video poster="assets/screenshot1.jpg" autoplay muted loop class="vidbacking">

3.        <source src="assets/Rallye.mp4" type="video/mp4">

4.    </video>

5.    <div class="htmleaf-demo center">

6.      <a href="index.html" class="current">div区域视频背景</a>

7.      <a href="index2.html">全屏视频背景</a>

8.    </div>

9.    <div class="clearfix"></div>

10. </div>

1. <div class="htmleaf-container">

2.    <video poster="assets/screenshot1.jpg" autoplay muted loop class="vidbacking">

3.        <source src="assets/Rallye.mp4" type="video/mp4">

4.    </video>

5.    <div class="video-back">

6.        <div class="htmleaf-demo center">

7.          <a href="index.html">div区域视频背景</a>

8.          <a href="index2.html" class="current">全屏视频背景</a>

9.        </div>

10.        <div class="clearfix"></div>

11.    </div>

12. </div>

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

1. <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

2. <script type="text/javascript" src="dist/jquery.vidbacking.js"></script>

3. <script type="text/javascript">

4. $(function(){

5.    $('.video-back').vidbacking();

6. });

7. </script>

1. <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"> 
   

2. $(function(){ 
   

3.     $('body').vidbacking({ 
   

4.         'masked': true 
   

5.     });  });  </script>