jQueryライブラリYouTube Inview AutoplayでYouTube動画がウィンドウ内に表示されたら自動で再生を開始

YouTube Inview Autoplayは、ページ内に埋め込んだYouTubeの動画がウィンドウ内に表示されると、自動的に再生・停止するjQueryプラグインです。

ウィンドウ内に動画が入ると再生されるので、ユーザーが再生しなくても一番最初から見て欲しい時など、スクロールを挟んで見せたいYouTubeの動画がある時に役立ちます。

この記事では、そんなjQueryライブラリYouTube Inview Autoplayの実装手順をサンプルと交え解説します。

実装のサンプル
実装の手順と方法
コピペ用コード一式
ざっくりとした解説
- 動画のパラメータ

実装のサンプル

早速実装のサンプルです。ウィンドウ内に動画が表示されたら自動で再生が始まります。

かかかず

再生が始まった後、スクロールして動画がウィンドウ外に出ると再生が停止します。

実装の手順と方法

jQuery本体の組み込み

ライブラリの使用には、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

2つのファイルをダウンロード

YouTubeの自動再生には、inview.jsというjQueryのライブラリを使います。

ライブラリは、以下公式サイトの上部にある「ダウンロード」ボタンからファイルをダウンロードしましょう。

外部リンク jQuery Plugin To Play / Stop Youtube Videos On Page Scroll

ライブラリの内、jquery.inview.min.js と、jquery.youtube-inview-autoplay.js の2つのファイルを使用します。

上記の外部リンクからダウンロードできない場合、以下のファイルを保存して利用ください。

　jquery.inview.min.js

　jquery.youtube-inview-autoplay.js

2つのファイルを任意の場所に保存してHTMLに記述

ダウンロードした2つのファイルを任意の場所に保存します。

保存ができたら、保存した場所のURLを<head>〜</head>の中にそれぞれ記述してライブラリを読み込みます。

HTML

<script src="ダウンロードしたファイルを設置したURL.../jquery.inview.min.js"></script> 
<script src="ダウンロードしたファイルを設置したURL.../jquery.youtube-inview-autoplay.js"></script>

記述する場所

2つのファイルは、<head>〜</head>の中の、jQuery本体よりも下の位置に記述するようにしましょう。

表示させたい場所にHTMLを記述

表示させたい場所に、以下のHTMLを記述します。

HTML

<div class="youtube-video" 
     id="demo-1" 
     data-video-id="XXXXXXXXXX" 
     width="890" 
     height="500"></div>

data-video-id="XXXXXXXXXX"のXXXXXXXXXXには、再生させたいYouTubeの動画IDを記述します。

かかかず

URLがhttps://www.youtube.com/watch?v=CinJuVtdp3Y だったら、CinJuVtdp3Y をdata-video-id=に記述します。

jQueryを記述

最後に、inview.jsを実行させるために、YouTubeAPIと一緒になっている以下のコードをHTMLの<body>〜</body>のクロージングタグの前に記述しましょう。

jQuery

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {
    $('.youtube-video').inViewAutoplay({
      autohide: 1,
      modestbranding: 1,
      rel: 0,
      quality: 'default',
      mute: 1,
    });
  }

かかかず

これで完成です！

コピペ用コード一式

この記事の手順と方法で紹介した、コード一式です。

好きなところに記述して使いましょう。

コードを表示する

HTML

<div class="youtube-video" 
     id="demo-1" 
     data-video-id="XXXXXXXXXX" 
     width="890" 
     height="500"></div>

jQuery

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {
    $('.youtube-video').inViewAutoplay({
      autohide: 1,
      modestbranding: 1,
      rel: 0,
      quality: 'default',
      mute: 1,
    });
  }

ざっくりとした解説

ざっくりとしたコードの解説です。

動画のパラメータ

$('.youtube-video').inViewAutoplay の中に、動画のパラメータを記述して使っていますが、YouTube公式にある通り、使える種類はかなりの数です。

外部リンク YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

中でもよく使うパラメータは以下の通りですが、中でも動画の自動再生で音量がある状態だとユーザーもビックリしてしまうので、mute: 1, の記述は必須です。

パラメータ
`autoplay`	プレーヤーを読み込んだときに最初の動画を自動再生するかどうかを指定します。サポートされる値は `0` または `1` です。デフォルト値は `0` です。
`cc_lang_pref`	プレーヤーに表示する字幕のデフォルトの言語を指定します。
`cc_load_policy`	このパラメータの値を `1` に設定すると、ユーザーが字幕をオフにしていても、字幕がデフォルトで表示されます。デフォルトの動作はユーザー設定に基づきます。
`color`	プレーヤーの動画進行状況バーで使用される色を指定します。これは、動画の視聴した部分を示す色として使用されます。有効なパラメータ値は `red` と `white` です。デフォルトでは、動画進行状況バーで赤が使用されます。注: `color` パラメータを `white` に設定すると、`modestbranding` オプションが無効。
`controls`	動画プレーヤーのコントロールを表示するかどうかを指定します。 `controls=0` – プレーヤーコントロールを表示しません。 `controls=1`（デフォルト）– プレーヤーコントロールを表示します。
`enablejsapi`	このパラメータの値を `1` に設定すると、IFrame または JavaScript Player API を呼び出してプレーヤーを制御できます。デフォルト値は `0`（これらの API を使用してプレーヤーを制御できない）です。
`end`	動画を特定の位置で停止させる場合に、再生を開始してからの時間（秒数）でその位置を指定します。パラメータ値は正の整数です。時間は動画の先頭から測定されます。
`fs`	このパラメータを `0` に設定すると、全画面表示ボタンはプレーヤーに表示されなくなります。デフォルト値は `1` であり、全画面表示ボタンが表示されます。
`hl`	プレーヤーのインターフェースの言語を設定します。パラメータの値は、ISO 639-1 規格の 2 文字言語コードまたは完全指定のロケールです。たとえば、`fr` や `fr-ca` は有効な値です。IETF 言語タグ（BCP 47）などの他の言語入力コードも正しく処理されます。
`iv_load_policy`	このパラメータの値を `1` に設定すると、動画アノテーションがデフォルトで表示されます。`3` に設定すると、動画アノテーションはデフォルトで表示されなくなります。デフォルト値は `1` です。
`loop`	単一動画プレーヤーの場合に `1` を設定すると、最初の動画が繰り返し再生されます。再生リストプレーヤーまたはカスタムプレーヤーの場合、再生リスト全体を再生した後、最初の動画からもう一度再生が始まります。サポートされている値は `0` と `1` で、デフォルト値は `0` です。
`modestbranding`	このパラメータを使用すると、YouTube プレーヤーに YouTube ロゴが表示されないようにすることができます。パラメータの値を `1` に設定すると、YouTube ロゴがコントロールバーに表示されなくなります。
`origin`	このパラメータは IFrame API のセキュリティを強化します。埋め込み IFrame でのみ使用できます。
`playlist`	このパラメータには、再生する動画 ID をカンマ区切りのリスト形式で指定します。値を指定すると、URL パスの `VIDEO_ID` に指定した動画が最初に再生され、`playlist` パラメータに指定した動画はその後に再生されます。
`playsinline`	このパラメータは iOS 上の HTML5 プレーヤーで動画をインラインまたは全画面表示のどちらで再生するかを制御します。有効な値は次のとおりです。 `0`: この値を指定すると全画面表示で再生されます。現時点ではこれがデフォルト値ですが、デフォルトは変更される場合があります。 `1`: この値を指定すると、`UIWebViews`（`allowsInlineMediaPlayback` プロパティを `TRUE` に設定して作成したもの）がインライン再生されます。
`start`	このパラメータを指定すると、動画の先頭から指定された秒数分進めた位置から動画の再生が開始されます。パラメータ値は正の整数です。
`widget_referrer`	プレーヤーが埋め込まれている URL を識別します。この値は、YouTube プレーヤーがウィジェットに埋め込まれ、このウィジェットがウェブページやアプリケーションに埋め込まれた場合に、YouTube アナリティクスのレポートで使用されます。