Vidage.js- 手機友善的全螢幕網頁背景套件

Vidage.js 是一個手機友善的全螢幕網頁背景套件，簡單讀入就可以使用。

下載後

1. 讀入 css 跟 js

<link href="Vidage.css" rel="stylesheet">
<script src="Vidage.min.js"></script>

2. 準備背景底圖

.Vidage__image{background-image:url(bg.jpg);

3. HTML 部分

<div class="vidage">
  <video id="vidage" class="vidage-video" preload="metadata" loop autoplay muted>
    <source src="bg.webm" type="video/webm">
    <source src="bg.mp4" type="video/mp4">
  </video>
</div>

4. 初始化套件

new Vidage('#VidageVideo');

5. 覆寫原本的背景圖片

.vidage::before {
  background-image: url('bg.jpg');
}