YouTube動画が画面内に入ったら自動再生とループさせる記述方法

YouTube動画をWEBページ内に埋め込んだ際に、ページをスクロールして画面内に入ったら自動再生して、動画が終了したら関連動画が出ないようにループさせる設定方法です。

スクロールしてYouTube埋め込み動画が表示領域から出たら停止となるので、同一ページ内で複数のYouTubeがある時に便利かもしれません。

wordpressを使っていたらプラグインで対応できますが、これは普通のコーディングで対応させる方法です。
プラグインを使わせずに自動再生に対応させたいとか、ループさせたい、というときのために忘備録も兼ねてまとめました。

画面内に入ったらYouTubeを自動再生させる方法

まずはYouTubeがスクロールして、画面内に入ったら自動的に再生する方法です。
その次の関連動画が出ないようにするためのループ方法はさらに下に書いています。

YouTube自動再生には”YouTubeのAPI”と”inview.js”というjqueryを使います。

”inview.js”はjQuery Plugin To Play / Stop Youtube Videos On Page Scrollからダウンロードしてください。

手順1：javascript読み込み

inview.min.jsとyoutube-inview-autoplay.jsのjavascript読み込みを記述

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/jquery.youtube-inview-autoplay.js"></script>

手順2：プレーヤーを記述

IFrame APIを使用してYouTubeプレーヤーを作成します。

<div class="sample" id="demo-1" data-video-id="[VIDEO_ID]" width="890" height="500"></div>

手順3：IFrame Player APIを設定

IFrame Player APIコードを非同期にロードし、プラグインを初期化し、プレーヤーパラメータをオブジェクトとして渡します。

<script>
  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() {
    $('.sample').inViewAutoplay({
      autohide: 1,
      modestbranding: 1,
      rel: 0,
      quality: 'hd720'
    });
  }
</script>

プレーヤーパラメータの説明

上記で使用しているIFrame Playerのプレーヤーのパラメータの説明です。

qualityの説明

”quality”にはsmall、medium、large、hd720、hd1080、highres の項目があります。
それぞれの説明は下記となります。

• 画質レベル small:
  プレーヤーの高さが 240 ピクセル、サイズが 320x240 ピクセル（アスペクト比 4:3）以上。
• 画質レベル medium:
  プレーヤーの高さが 360 ピクセル、サイズが 640x360 ピクセル（アスペクト比 16:9）または 480x360 ピクセル（アスペクト比 4:3）。
• 画質レベル large:
  プレーヤーの高さが 480 ピクセル、サイズが 853x480 ピクセル（アスペクト比 16:9）または 640x480 ピクセル（アスペクト比 4:3）。
• 画質レベル hd720:
  プレーヤーの高さが 720 ピクセル、サイズが 1280x720 ピクセル（アスペクト比 16:9）または 960x720 ピクセル（アスペクト比 4:3）。
• 画質レベル hd1080:
  プレーヤーの高さが 1080 ピクセル、サイズが 1920x1080 ピクセル（アスペクト比 16:9）または 1440x1080 ピクセル（アスペクト比 4:3）。
• 画質レベル highres:
  プレーヤーの高さが 1080 ピクセル以上、つまりプレーヤーのアスペクト比が 1920x1080 ピクセル以上。
• 画質レベル default:
  YouTube が適切な再生画質を選択します。この設定は、画質レベルをデフォルトの状態に戻します。それまでに cueVideoById、loadVideoById または setPlaybackQuality の各関数で行った再生画質の設定は無効になります。

その他のYouTubeの埋め込みパラメータ一覧

  https://www.youtube.com/v/VIDEO_ID?
    version=3
    &loop=1
    &playlist=VIDEO_ID

詳しくはYouTubeの公式サイトの「IFrame Player API」ページをご覧ください。

https://developers.google.com/youtube/iframe_api_reference?hl=ja
https://developers.google.com/youtube/player_parameters?hl=ja

スポンサーリンク

ループ再生の方法

YouTube動画を見終わった際に、関連動画が表示されないようにするのに必須のループ設定は2通りあります。
標準の埋め込みのiframeを使う方法と、jsで埋め込む方法です。

標準の埋め込みのiframeを使う方法

YouTubeの「埋め込み」から出力できる＜iframe＞のコードにループの記述を追加する方法になります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]" frameborder="0" allowfullscreen></iframe>

の[VIDEO_ID]のあとに「?rel=0&controls=0&autoplay=1&loop=1&playlist=[VIDEO_ID]&showinfo=0&modestbranding=1&wmode=transparent」を追記します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]?rel=0&controls=0&autoplay=1&loop=1&playlist=[VIDEO_ID]&showinfo=0&modestbranding=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>

&nbsp

jsで埋め込む

https://www.youtube.com/iframe_apiを読み込んでJavaScriptで制御する方法になります。
[VIDEO_ID]はYouTube動画のIDです。

<div id="player"></div>

// YouTubeの埋め込み
    function onYouTubeIframeAPIReady() {
        ytPlayer = new YT.Player(
            'player', // 埋め込む場所の指定
            {
                videoId: '[VIDEO_ID]', // YouTubeのID
                playerVars: {
                    loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須
                    playlist: '[VIDEO_ID]',//次に流すYoutubeのID
                    controls: 0,//コントローラー無し
                    autoplay: 1,//オートプレイ
                    showinfo: 0//動画タイトルなど表示しない
                },
                events: {
                    'onReady': onPlayerReady
                }
            }
        );
    }

スポンサーリンク

まとめ：YouTubeを自動再生してループさせる

まとめると画面内に入ったらYouTubeを自動再生させて、ループさせる記述は下記となります。

IFrame Player APIコードを非同期にロードし、プラグインを初期化、プレーヤーパラメータにループ設定とプレイリストの設定を追加しました。

<div class="youtube-video" id="demo-1" data-video-id="[VIDEO_ID]" width="890" height="500" loop="1"></div>

<script type="text/javascript" src="js/jquery.inview.min.js"></script>
<script type="text/javascript" src="js/jquery.youtube-inview-autoplay.js"></script>
<script>
  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() {
    $('.sample').inViewAutoplay({
      autohide: 1,
      modestbranding: 1,
      rel: 0,
      quality: 'hd720',
      loop: 1, //0:ループしない 1:ループする 1の場合playlist設定必須
      playlist: '[VIDEO_ID]', //次に流すYoutubeのID
      showinfo: 0 //動画タイトルなど表示しない
    });
  }
</script>

YouTubeのパラメータは途中で仕様変更などで使えなくなったりするので、書き方は今後変わっていくかもしれません。
とりあえず2020年の時点版です。しばらくは大丈夫かな。

-WEB