JavaScript

jquery.vide.jsを使って簡単に動画をウェブページの背景にする方法

  /

jquery.vide.jsを使って簡単に動画（mp4、ogv、webmファイル）をウェブページの背景にする方法をご紹介します。

Contents
  1. 動画をウェブページの背景にするCSS記述
  2. 動画をウェブページの背景にするHTML記述
  3. jquery.vide.jsを使って簡単に動画をウェブページの背景にするJavaScriptの記述
  4. jquery.vide.jsを使って動画（mp4）をウェブページの背景にするデモページ
  5. ソース元：Vide - easy as hell jQuery plugin for video backgrounds

動画をウェブページの背景にするCSS記述

※htmlとbodyタグのwidth、heightを100%にします。必要に応じて変更して下さい。

<style>
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding: 20px 0;
  position: absolute;
  width: 100%;
}
</style>

動画をウェブページの背景にするHTML記述

※bodyタグにdata-vide-bg=”tree”を記述します。同じ階層に動画（tree.mp4）を用意します。その他動画ファイルogv、webmも用意すれば利用可能です。

<body data-vide-bg="tree">
<h1>jquery.vide.jsを使って動画をウェブページの背景にしてます。</h1>

</body>

jquery.vide.jsを使って簡単に動画をウェブページの背景にするJavaScriptの記述

※jquery.min.js（1.11.3系）、jquery.vide.jsファイルを読み込むだけです。

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

jquery.vide.jsを使って動画（mp4）をウェブページの背景にするデモページ

jquery.vide.jsを使って動画（mp4）をウェブページの背景にするデモページ

ソース元：Vide – easy as hell jQuery plugin for video backgrounds

Vide – easy as hell jQuery plugin for video backgrounds

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.vide.js 背景動画
RELATED POST