jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】

最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。

まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。

このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合におすすめです。

今回作成したサンプル

サンプルを見る

動画ファイルは写真家の湯沢英治さんの「REAL BONES」のムービーを背景に表示させてみます。

表示させるYoutubeの動画ファイル

jQueryプラグイン「tubular」で動画を背景に設定する流れ

tubularプラグインは、YOUTUBEに公開されている動画をブラウザの背景全体に再生さえることができますので、事前に動画を公開してURIを確認し、動画が持つ固有のIDを控えておきます。

そして、tubularプラグインが生成する背景動画表示用HTMLを格納する要素を用意し、動画IDやミュート設定などを定義したオプションを引数として、tubular関数を呼び出すと、背景全体に動画が表示されることになります。

アドレスバーに表示させる動画のIDを使用します。

//script.js
    var $TB = $('<div id="videoContainer">').prependTo($('body')),
    _option = {
      videoId : '-bCKCl3Gj1M',
      mute: false
    };

動画の全体に動画の荒れを目立たせなくする網模様を配置する

動画を背景全体で再生するとなると、モニタの大きさによってはブラウザサイズが大きくなり背景の動画も大きくなるため、ブロックノイズやグラデーションがある部分などの動画が荒れてしまってイメージが悪くなる時があります。

そういった際のひとつの方法として以前はフラッシュサイトなどで背景動画を全面にする際によく使われていた方法ですが、動画全体に格子状の模様の背景画像を前面に配置して動画のノイズ感を目立たなくすることができます。

模様を付けたくない場合はコード自体を削除すると通常の動画のままで再生されることも可能ですので、動画の圧縮状況や映像内の内容によりますので状況にあわせて使うとよいでしょう。

動画の前面に網模様が入るように設置しているので動画の荒れが目立たない。（画像ではわかりにくいので下記のサンプルでご確認ください）

前面に模様を配置して動画の荒れを目立たせなくするサンプル

//script.js
    var _ovc = $('<div id="bgOverlayContainer">').appendTo($('body'));
    _ovc.addClass('overlayPattern');
       
    $(window).on('resize', function(){
        _ovc.css({
          height : window.innerHeight
        });
    });

//style.css
.overlayPattern {
  background-image: url(../img/overlay.png);
}

スマートフォンなどのモバイル端末の対応を考える

PCサイトではブラウザ全体に背景動画を再生することで、よりグラフィカルでリッチコンテンツのように見せることができるが、もともと画面領域の小さいスマートフォンなどのモバイル端末ではページ情報が見えにくいものとなります。

そこでエージェント判別をしてスマートフォンなどのモバイル端末からのアクセスではフルスクリーンでなく通常の動画として再生を選択できるように設定します。

ただし、PCなどのグラフィカルな演出は情報とは関係ないイメージ的なものの場合は通常の動画として見る必要のないものなどもあります。その場合は非表示にするなど用途によって考えましょう。

スマートフォンで閲覧した場合には動画は通常に表示し、モバイル端末用にCSSでレイアウトを変更させています。

この際にレイアウトの変更をメディアクエリにすると解像度の高いモバイル端末では動画はフルスクリーンでなく通常常状態での読み込みとなり、レイアウトはPC用のフルスクリーン用となりレイアウトが崩れてしまうので、モバイルと判定された場合にclass=”mobile”などを追加してCSSでレイアウトを変更させるように行いました。

  var _ua = (function(){
    var ua = navigator.userAgent;
    return {
      Mobile: typeof window.orientation != "undefined"
    };
  })();

・・・省略・・・

if(_ua.Mobile) {
      $('body').addClass('mobile');
      var _tpl = '<iframe width="640" height="360" src="//www.youtube.com/embed/'+_option.videoId+'" frameborder="0" allowfullscreen></iframe>';
      $TB.append(_tpl);
    } else {
      $TB.tubular(_option);
    }
  };

YOUTUBEの動画を活用するとサーバーの負荷を軽減できるのでよいですね。

今回紹介したサンプルの詳細は『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

自分はここで18個のサンプルを担当しており、この連載でどんどん紹介していこうと思っています。

作成したサンプルや本の紹介はこちらをご覧ください。

すぐに使えるサンプルがたくさん！『現場でかならず使われている jQueryデザインのメソッド』発売いたしました。

Webサイトに全面動画を活用した例

清水へ参る道

http://feel.kiyomizudera.or.jp/

清水寺の特設サイトで、全面動画が再生されますが、映像、音共にとてもクオリティーの高いサイトになっています。コンテンツ内にも動画が効果的に使われています。

何度も行ったことがある清水寺ですが、違った場所のようでまた行ってみたくなりますね。

ビデオ動画をヘッダーに使った素敵Webデザインまとめ

http://photoshopvip.net/archives/59239

Photoshop VIPさんで動画が使われているサイトがまとめられていて、動画を使ったレイアウトの参考になります。

今回は以上になります。

次回はvideo要素を使って自分のサーバーにある動画ファイルを背景動画にする方法を行います。