第1回
tubularプラグインを使用して
YOUTUBEの動画をブラウザの背景全体に再生させる

YouTubeにアップロードした動画をブラウザの背景全体に表示させてインパクトのあるページをtubularプラグインを使用して作成しました。また今回はスマートフォンで閲覧の場合には通常の動画として見れるように対応しました。背景に動画を流したい場合におすすめのサンプルです。

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

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

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

■今回作成したサンプル

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

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

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

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

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

（▲クリックして拡大）	（▲クリックして拡大）
動画の前面に網模様が入るように設置しているので動画の荒れが目立たない（実際のサンプルでご確認ください）

  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);
    }
  };

『現場でかならず使われている jQueryデザインのメソッド』

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

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

清水へ参る道

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

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

2014/8/21

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。 本書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！