JavaScript

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

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

動画をウェブページの背景にする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アナリティクスタグは流用しないで下さい。