YouTube Player API

JavaScriptのYouTube Player APIでYouTube動画を複数設置してマウスオーバーで再生

2022年7月26日 10分

スマホでは「マウスオーバー」の概念がないので、複数のYouTube動画が並び再生ボタンタップで再生される普通のものになります。

かかかず

完全に「デスクトップ向け」のスニペットです。

是非、最後までご覧いただけると嬉しいです。

YouTube Player API
マウスオーバーで再生されるYouTube動画のサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

YouTube Player API

YouTube Player APIは、YouTubeの動画を埋め込むことができるAPIです。

APIを使わない場合、HTMLの iframe で埋め込むことができますが、APIはJavaScriptで提供されており、再生や停止の挙動や、再生条件の設定が色々できたりと応用が効くので、非常に便利です。

外部リンク iframe 組み込みの YouTube Player API リファレンス

この記事ではこのAPIを使い、以下の記事を参考にしていますので、こちらの記事も参考にしてみてください。

参考YouTube Player APIを使う時のtips集Tips Note by TAM

マウスオーバーで再生されるYouTube動画のサンプル

早速サンプルです。

YouTubeの動画が4つ並んでいますが、各種プレイヤーの上にマウスカーソルが乗っかると自動で再生が始まります。再生したプレイヤーに乗せたマウスカーソルが外れると、再生が停止します。

かかかず

YouTube公式のサムネイル閲覧時と同じような挙動です。

実装の手順と方法

各コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

はじめに、設置したい場所にHTMLのコードを記述します。

コードを表示

<div class="ytPlayerBlock">
  <div id="player0" class="ytplayer"></div>
  <div id="player1" class="ytplayer"></div>
  <div id="player2" class="ytplayer"></div>
  <div id="player3" class="ytplayer"></div>
</div>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// youtube api のスクリプト挿入
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// iframeの生成
var player = [];
function onYouTubeIframeAPIReady() {
    let w = '100%';
    let h = '100%';
    player['player0'] = new YT.Player( 'player0', {
        height: h,
        width: w,
        videoId: 'GLScmndu-XE',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player1'] = new YT.Player( 'player1', {
        height: h,
        width: w,
        videoId: 'APDDT03bSWU',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player2'] = new YT.Player( 'player2', {
        height: h,
        width: w,
        videoId: 'rW4Itck0Cv8',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player3'] = new YT.Player( 'player3', {
        height: h,
        width: w,
        videoId: 'MafQsaCutqA',
        events: {
            'onReady': onPlayerReady,
        }
    });
}

// 動画準備完了時にイベントの登録
function onPlayerReady() {

// player0
const ytplayer0 = document.getElementById( 'player0' );

    ytplayer0.addEventListener( 'mouseenter', () => {
        player['player0'].mute();
        player['player0'].playVideo();
    } );
    ytplayer0.addEventListener( 'mouseleave', () => {
        player['player0'].mute();
        player['player0'].stopVideo();
    } );

// player1
const ytplayer1 = document.getElementById( 'player1' );

    ytplayer1.addEventListener( 'mouseenter', () => {
        player['player1'].mute();
        player['player1'].playVideo();
    } );
    ytplayer1.addEventListener( 'mouseleave', () => {
        player['player1'].mute();
        player['player1'].stopVideo();
    } );

// player2
const ytplayer2 = document.getElementById( 'player2' );

    ytplayer2.addEventListener( 'mouseenter', () => {
        player['player2'].mute();
        player['player2'].playVideo();
    } );
    ytplayer2.addEventListener( 'mouseleave', () => {
        player['player2'].mute();
        player['player2'].stopVideo();
    } );

// player3
const ytplayer3 = document.getElementById( 'player3' );

    ytplayer3.addEventListener( 'mouseenter', () => {
        player['player3'].mute();
        player['player3'].playVideo();
    } );
    ytplayer3.addEventListener( 'mouseleave', () => {
        player['player3'].mute();
        player['player3'].stopVideo();
    } );

}

CSSを記述

最後にCSSの記述です。

コードを表示

.ytPlayerBlock {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

iframe.ytplayer {
    width: 49%;
    height: 220px;
}
@media screen and (max-width: 767px) {
  iframe.ytplayer {
    width: 100%;
  }
}

かかかず

これで完成です。

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

コードについてざっくりですが解説します。コードはHTML・JavaScript・CSSの3種類です。

HTML

HTMLは、YouTube Player APIを利用するので、id名がついた div タグです。div タグはレンダリングで、YouTube動画が配置される iframe タグに置換されます。

<div class="ytPlayerBlock">
  <div id="player0" class="ytplayer"></div>
  <div id="player1" class="ytplayer"></div>
  <div id="player2" class="ytplayer"></div>
  <div id="player3" class="ytplayer"></div>
</div>

class名は付けなくてもOKですが、flexboxのレイアウトで配置させる為 div タグに「ytplayer」を付けています。

JavaScript

JavaScriptは、YouTube Player APIを使う時のスクリプトを冒頭に入れ、そこからYouTubeプレイヤーの設定を記述します。

APIのJavaScriptコードが読み込まれると、APIは onYouTubeIframeAPIReady() を呼び出します。そして、その名前の関数をグローバルスコープとして定義して、プレイヤーの作成処理を行います。

// youtube api のスクリプト挿入
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// iframeの生成
var player = [];
function onYouTubeIframeAPIReady() {
    let w = '100%';
    let h = '100%';
    player['player0'] = new YT.Player( 'player0', {
        height: h,
        width: w,
        videoId: 'GLScmndu-XE',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player1'] = new YT.Player( 'player1', {
        height: h,
        width: w,
        videoId: 'APDDT03bSWU',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player2'] = new YT.Player( 'player2', {
        height: h,
        width: w,
        videoId: 'rW4Itck0Cv8',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player3'] = new YT.Player( 'player3', {
        height: h,
        width: w,
        videoId: 'MafQsaCutqA',
        events: {
            'onReady': onPlayerReady,
        }
    });
}

// 動画準備完了時にイベントの登録
function onPlayerReady() {

// player0
const ytplayer0 = document.getElementById( 'player0' );

    ytplayer0.addEventListener( 'mouseenter', () => {
        player['player0'].mute();
        player['player0'].playVideo();
    } );
    ytplayer0.addEventListener( 'mouseleave', () => {
        player['player0'].mute();
        player['player0'].stopVideo();
    } );

// player1
const ytplayer1 = document.getElementById( 'player1' );

    ytplayer1.addEventListener( 'mouseenter', () => {
        player['player1'].mute();
        player['player1'].playVideo();
    } );
    ytplayer1.addEventListener( 'mouseleave', () => {
        player['player1'].mute();
        player['player1'].stopVideo();
    } );

// player2
const ytplayer2 = document.getElementById( 'player2' );

    ytplayer2.addEventListener( 'mouseenter', () => {
        player['player2'].mute();
        player['player2'].playVideo();
    } );
    ytplayer2.addEventListener( 'mouseleave', () => {
        player['player2'].mute();
        player['player2'].stopVideo();
    } );

// player3
const ytplayer3 = document.getElementById( 'player3' );

    ytplayer3.addEventListener( 'mouseenter', () => {
        player['player3'].mute();
        player['player3'].playVideo();
    } );
    ytplayer3.addEventListener( 'mouseleave', () => {
        player['player3'].mute();
        player['player3'].stopVideo();
    } );

}

プレイヤーの制御は、onReady イベントでプレイヤーの準備が整ったことを確認してから行っていき、そこで設置した各プレイヤーを .addEventListener の「mouseenter = マウスカーソルが乗っかった時」と「mouseleave = マウスカーソルが離れた時」の2つでそれぞれ再生と停止の制御を行わせます。

かかかず

動画の再生をする場合には mute = 消音も忘れずにしましょう。しないとユーザーもびっくりします。

CSS

CSSは、レイアウトのflexboxに関する記述だけでスマホ用に一個だけブレイクポイントを作り、プレイヤーのサイズを定義しています。

.ytPlayerBlock {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

iframe.ytplayer {
    width: 49%;
    height: 220px;
}
@media screen and (max-width: 767px) {
  iframe.ytplayer {
    width: 100%;
  }
}

タブレット等々、各種ウィンドウサイズに適合させる場合は適宜ブレイクポイントも追加するようにしましょう。