Youtube IFrame Player APIを使って複数の動画をhtmlに埋め込み、それぞれをループ再生します。動画はレスポンシブ対応にします。
html、css、ループ再生以外のjavascriptは下記の記事と同様です。
javascriptのyoutube埋め込み時の処理で、playerVarsにループ再生のパラメータを設定します。loop: 1の指定と、playlist: ytData[i][‘id’]でyoutubeのIDを指定します。
//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: 'ZRCdORJiUgU', //youtubeのID
area: 'movie-content01', //youtubeを表示する場所
},
{
id: '6aFdEhEZQjE',
area: 'movie-content02',
}
];
//YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
for (var i = 0; i < ytData.length; i++) {
ytPlayer[i] = new YT.Player(ytData[i]['area'], {
width: 800,
height: 450,
videoId: ytData[i]['id'],
playerVars: {
rel: 0, //再生動画と同じチャンネルから関連動画を選択
modestbranding: 1, //YouTubeロゴを表示しない
loop: 1,
playlist: ytData[i]['id'] //youtubeのID
}
});
}
}