富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. web制作
  3. ブログ

動画をWebサイトの背景にするjQueryプラグイン「VIDE」

vide

Webページの背景を動画にできるjQueryプラグインを見つけたので紹介します。
例えばページ全体の背景を動画にするなど、うまく使うとかっこいいサイトができると思います。

インストール方法

1. Bowerを使う場合

bower install vide

 2. 手動でインストールする場合

GithubからZIPファイルをダウンロードし、展開します。

finder

distフォルダの中にあるjquery.vide.min.jsをページに追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.vide.min.js"></script>

使い方

背景にしたい動画を用意します。
クロスブラウザ対応のため、動画形式はいくつか用意する必要があります。
動画に対応していないブラウザ用に画像ファイル (.jpg, .png, .gifのどれか)も用意することをおすすめします。

video/
   ├── video.mp4
   ├── video.ogv
   ├── video.webm
   └── video.jpg

 

背景を動画にしたい要素を指定して.vide()を実行します。

<div id="video-bg">背景を動画にしたい要素</div>

動画ファイルの指定は拡張子の前までですのでご注意下さい。ファイルが`/video/ocean.mp4`の場合は`/video/ocean`と指定します。

$('#video-bg').vide('vide/ocean', {
      volume: 1,
      playbackRate: 1,
      muted: true,
      loop: true,
      autoplay: true
});

デモ

対応ブラウザ

  • モダンブラウザは全て対応
  • IEは9以上
  • iOSは残念ながら動画は表示されず、代替画像が表示されます
  • Androidのいくつかの端末は対応しているようですが、基本的にはiOSと同様です

 

VIDE – Easy as hell jQuery plugin for video backgrounds
http://vodkabears.github.io/vide/

この記事を書いたスタッフ
Kazuyuki Hayashi
Symfony / Node.js / React.js / Swift を中心にテクノロジー系の記事を書きます。趣味はコーヒーです。