【レスポンシブ対応】背景にYoutubeを全画面で表示するjQueryプラグイン『Tubular.js』の使い方

今回はウェブサイトの背景にフルスクリーンで動画を表示する方法についてご紹介します。

動画にはテキストでは伝えきれないニュアンスや雰囲気などを直感的に伝えることができるというメリットがありますので、有効に活用することでユーザーに強く印象を残すことができます。

Webデザインで動画を利用する方法

Webデザインに動画を利用する場合、大きく分けて2つの方法があります。

動画ファイル(mp4など)をサーバーにアップロードして利用
Youtube APIやjQueryプラグインなどを使用してYoutube動画を読み込む

一つ目は、自分のサーバーにmp4などの動画ファイルをアップロードしてvideoタグなどで埋め込む方法です。

この方法では動画周辺のUI(再生・ミュート・ボリュームボタンなど)のデザインまで自由に設計できますが、動画の読み込みに時間がかかる場合、ページの表示が著しく遅くなることがあるので注意が必要です。

Youtubeの動画を利用する場合には、UIは基本的にYoutubeのものを流用するような形になります。

しかし、動画自体はページの読み込みとは別に行われるため、動画のファイルサイズがページ読み込み速度に影響することはありません。

ページ表示速度の遅延はユーザーの離脱に大きく関係していますので、個人的にはなるべくYoutubeを利用する方がいいと思っています。

ということで、ここではYoutubeを利用して動画をフルスクリーンで表示するjQueryプラグイン『Tubular.js』をご紹介します。

Youtubeをフルスクリーンで表示するjQueryプラグイン『Tubular.js』

Youtubeを背景に表示するプラグインは複数あるのですが、レスポンシブ対応が十分でなく、ウィンドウサイズを小さくすると上下に大きく余白が空いてしまうものがほとんどです。

その点、今回ご紹介する『Tubular.js』はウィンドウサイズを変更してもバッチリ全画面表示してくれるのでおすすめです。

jQueryプラグイン『Tubular.js』の使い方

まず、Tubular.jsの公式サイトからファイルをダウンロードします。

ページ右上の「Download」というところから進んで、Google Codeから最新版のjquery.tubular.1.0.1.zip(2020年6月現在)をダウンロードすれば大丈夫です。

ダウンロードできたら、その中の「js」フォルダにある「jquery.tubular.1.0.js」というファイルをあなたのウェブサイトの任意のフォルダにアップロードしてください。

ここでは、「js」というフォルダにアップロードしたものとして進めていきます。

jQueryとプラグインを読み込む

動画を表示したいページのhead要素に下記のように記述して、jQueryとTubular.jsを読み込みます。

HTML

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tubular.1.0.js" type="text/javascript"></script>

Tubular.jsの設定

次に、その下に下記のように記述してください。

JavaScript

<script>
$('document').ready(function() {
  var options = {
    videoId: 'Youtube動画ID',
      mute: true,
  };
  $('#movie').tubular(options);
});
</script>

Youtube動画IDは、背景として使用したい動画のIDです。

Youtube動画をブラウザで表示すると、URLが下記のようになっています。

https://www.youtube.com/watch?v=cLyUcAUMmMY

この「watch?v=」より後ろの文字列が動画IDです。この例の場合は「cLyUcAUMmMY」の部分ですね。

上記ソースの場合は、ここで設定した動画が#movieというIDを付与した要素の背景として挿し込まれます。

#movieの部分は自由に変更してもらって大丈夫です。

なお、ページのコンテンツは#movieの中に記述します。

完成したソース

以上をまとめると、ソースは下記のようになります。

HTML

<html>

  <head>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.tubular.1.0.js" type="text/javascript"></script>
    <script>
    $('document').ready(function() {
      var options = {
        videoId: 'Youtube動画ID',
          mute: true,
      };
      $('#movie').tubular(options);
    });
    </script>
  </head>

  <body>
    <div id="movie">

      <!-- ここにページコンテンツ -->

    </div>
  </body>

</html>

以上で設置完了です。

スマホのときには非表示にする選択もアリ

Youtube動画はページのソースとは別に読み込まれますが、それでもスマホなどでは通信環境によって動画の読み込みに時間がかかり、背景に何も表示されないということも起こりえます。

そのため、スマホ表示時には動画を読み込まず、代替画像を背景として表示するという選択もアリだと思います。

その場合には、以下のような形でユーザーエージェント(スマホ・タブレット・PC)によって読み込むソースを切り替えるといいでしょう。

PHP

<?php
	$ua=$_SERVER['HTTP_USER_AGENT'];
	$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
		if ($browser == true){
		$browser = 'sp';
	}
	if($browser == 'sp'){
?>

  //スマホの場合は背景動画を表示せず代替画像に差し替え
  <style>
  #movie {
    background: url(images/background.png) no-repeat center center;
    background-size: cover;
  }
  </style>

<?php }else{ ?>

  //タブレット・PCの場合は背景動画を表示
  <script src="js/jquery.tubular.1.0.js" type="text/javascript"></script>
  <script>
  $('document').ready(function() {
    var options = {
      videoId: 'Youtube動画ID',
        mute: true,
    };
    $('#movie').tubular(options);
  });
  </script>

<?php } ?>