YouTube動画を背景に使うなら「jquery.mb.YTPlayer」が良さげ

最近YouTubeの動画をWebサイトの背景として使う案件が増えており、何か手軽に実装できるプラグインないかなーと探していたら「jquery.mb.YTPlayer」というのにたどり着きました。

なかなか使いやすいプラグインだと思ったので、実装メモを残しておきます。

github.com

ライセンス

MIT / GPL

スクリプトを読み込む

クローンするなりzipで落とすなりしてください。

<script src="/js/vendor/jquery.mb.YTPlayer.min.js"></script>

動画を表示させる要素を追加

js-mainvisualVideo は任意のIDを入れてください。
data-property に設定を追記していきます。※後ほど説明します

<div class="mainvisual">
    <div class="mainvisual__video" id="js-mainvisualVideo" data-property="{
      videoURL: 'BsekcY04xvQ',
      containment: 'self',
      autoPlay: true,
      loop: 1,
      mute: true,
      startAt: 0,
      opacity: 1,
      showControls: false,
      showYTLogo: false
  }"></div>
</div>

JSを実行

先程の js-mainvisualVideo を指定して実行します。

$('#js-mainvisualVideo').YTPlayer();

CSSを記述

親要素に高さを持たせてあげましょう。

.mainvisual {
    height: 100vh;
    position: relative;
}
.mainvisual__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上

これで動画プレーヤーが指定した要素に生成されます。
上記の設定だと、自動再生、ミュート、ループ再生、コントロールの非表示、ロゴの非表示が設定されています。

※何故か動画をクリックすると一時停止してしまうので、上に透明の要素などをかぶせてクリックできないようにすると良いでしょう。

data-property に設定できる項目

ざっと読んだ感じです。

音声をミュート
- mute: true (boolean);

コントロールバーの表示
- showControls: true (boolean)

スマホのときに画像へ切り替える
- mobileFallbackImage: absolute/path/to/image (string)

アスペクト比の設定
- ratio: ‘4/3’, ‘16/9’ or ‘auto’ (string)

動画クオリティの設定
- quality: ‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”.

動画の透明度
- opacity: 0 to 1 (number)

動画の配置場所（selfだとJSで指定した要素に、bodyだとbody直下に生成）
- containment: (string)

Retinaディスプレイ対応
- optimizeDisplay: true (boolean)

ループ再生
- loop: false (boolean)

ボリューム設定
- vol: 1 to 100 (number)

開始位置
- startAt: 20 (number)

停止位置
- stopAt: 20 (number)

自動再生
- autoPlay: true (boolean)

YouTubeのロゴを表示
- showYTLogo: true (boolean)

ラスターイメージの設置
- addRaster: false (boolean)

画像マスクを設定？
- mask: ‘path/to/mask’ or object {0:‘path/to/mask1’, 20:‘path/to/mask2’, …}

HTML5フルスクリーン表示
- realfullscreen: true (boolean)

ページから離れた際に動画を一時停止する
- stopMovieOnBlur: true (boolean)

Google Analyticsのトラッキング設定
- gaTrack: true (boolean)

ウィンドウをリサイズした際の位置設定？
- anchor: ‘ceter,center’ (string)

動画プレーヤー読み込み後に任意の関数を実行
- onReady: (function)

動画プレーヤーエラー時に任意の関数を実行
- onError: (function)

メソッドを使ったプレーヤー操作

動画プレーヤー生成後も用意されたメソッドで挙動を操作することが可能です。

一時停止

$('#js-mainvisualVideo').YTPPause();

停止

$('#js-mainvisualVideo').YTPStop();

再生

$('#js-mainvisualVideo').YTPPlay();

その他のメソッドは下記を参照されたし。

https://github.com/pupunzi/jquery.mb.YTPlayer/wiki#external-methods