YouTube Player API 複数の動画を読み込む方法

JavaScript

2021/10/03

YouTube Player APIを利用すると、動画再生のループや停止など、JavaScriptでプレーヤーを制御できるのでとても便利です。
今回は一つのページ内に、複数のYouTube動画を埋め込む方法をご紹介します。

複数の動画を読み込む方法

サンプル

See the Pen by RECOOORD (@recooord) on CodePen.

まずはサンプルをご覧ください。
YouTube動画が並んで表示されているのが確認できると思います。

HTML

<div id="video01"></div>
<div id="video02"></div>
<div id="video03"></div>
<div id="video04"></div>

HTMLではIDを入れた要素を作成してください。

JavaScript

//IFrame Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayer = [];
var ytData = [
    {
		id: 'M7lc1UVf-VE', //YouTubeのID
		area: 'video01' //表示する場所
    }, {
        id: 'M7lc1UVf-VE', //YouTubeのID
        area: 'video02' //表示する場所
    }, {
        id: 'M7lc1UVf-VE', //YouTubeのID
        area: 'video03' //表示する場所
    }, {
        id: 'M7lc1UVf-VE', //YouTubeのID
        area: 'video04' //表示する場所
    }
];
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: '640', //プレーヤーの幅
			height: '360', //プレーヤーの高さ
			videoId: ytData[i]['id'], //YouTubeのID
		});
    }
}

ytDataの配列にYouTubeのIDと、動画を表示するために、先ほどHTMLで指定したIDを入れていきます。
このように記述することで、複数のYouTube動画を表示することができます。

しかし注意点としては、動画の再生ボタンを複数クリックした際に、他の動画も同時に再生されてしまいます。

同時再生しないようにする方法

サンプル

See the Pen YouTube Player API Multiple02 by RECOOORD (@recooord) on CodePen.

上記のサンプルで動画を複数再生させてみてください。
一つだけが再生されるのが確認できたと思います。

JavaScript

//IFrame Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayer = [];
var ytPlaying, ytStop, ytPlay;
var ytData = [
    {
		id: 'M7lc1UVf-VE', //YouTubeのID
		area: 'video01' //表示する場所
    }, {
        id: 'M7lc1UVf-VE', //YouTubeのID
        area: 'video02' //表示する場所
    }, {
        id: 'M7lc1UVf-VE', //YouTubeのID
        area: 'video03' //表示する場所
    }, {
        id: 'M7lc1UVf-VE', //YouTubeのID
        area: 'video04' //表示する場所
    }
];
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: '640', //プレーヤーの幅
			height: '360', //プレーヤーの高さ
			videoId: ytData[i]['id'], //YouTubeのID
            events: {
                'onStateChange': onPlayerStateChange //プレーヤーの状態設定
            }
		});
    }
}

//プレーヤーの状態設定
function onPlayerStateChange(event) {
    // 各プレーヤーの状態を確認
    for (var i = 0; i < ytData.length; i++) {
        var thisState = ytPlayer[i].getPlayerState();
        if (thisState == 1 && ytPlaying == undefined) {
            ytPlaying = i;
        } else if (thisState == 1 && ytPlaying != i) {
            ytStop = ytPlaying;
            ytPlay = i;
        }
    }
    // 同時再生があった場合、元々再生していた方を停止する
    if (ytStop != undefined) {
        ytPlayer[ytStop].pauseVideo();
        ytStop = undefined;
    }
    // 現在再生中のプレーヤー番号を保存しておく
    if (ytPlay != undefined) {
        ytPlaying = ytPlay;
        ytPlay = undefined;
    }
}

onPlayerStateChange関数で、各プレーヤーの状態を確認し、条件分岐で再生を停止したりしています。

YouTube動画の自動再生や、ループ再生の方法などを参照する場合は、別ページにて紹介しております。
是非ご覧くださいませ。