现在很多APP官网都开始用视频作为背景，看起来各种高端大气上档次。

录个视频很简单，但要把背景视频播放细节做好却不太容易。

Vide把这件事变得不能再简单了。先来看看它的效果：

不错吧 ：） 

要做成这样，只需要bower install 一下：

bower install vide

然后引用JS

<script src="js/jquery.vide.min.js"></script>

将素材按以下目录结构放置

path/
├── to/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

最后在要引用的Dom元素上添加data-vide-bg属性即可：

<div style="width: 1000px; height: 500px;"
    data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

当然你也可以直接用JS触发：

$("#myBlock1").vide("path/to/video");
$("#myBlock2").vide("path/to/video", {
...options...
});

一切就OK了。赶紧收藏起来吧，下次你的老板让你搞个NB的首页时，拿出来帅呆他。