Youtube IFrame Player APIを使って複数の動画をhtmlに埋め込み、それぞれを自動再生します。動画はレスポンシブ対応にします。
html、css、自動再生以外のjavascriptは下記の記事と同様です。
javascriptのyoutube埋め込み時の処理でplayerVarsに自動再生のパラメータを設定しても、ChromeとFirefoxは非対応のため動作しません。試しにplayerVarsにautoplay: 1を指定しても自動再生されません。そこでonReadyイベントを起動してonPlayerReady関数を実行します。関数では音声をミュートにしてから動画を再生しています。これでChromeとFirefoxでも自動再生されます。
//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'],
events: {
'onReady': onPlayerReady,
},
playerVars: {
rel: 0, //再生動画と同じチャンネルから関連動画を選択
modestbranding: 1, //YouTubeロゴを表示しない
//autoplay: 1 ← ChromeとFirefoxは非対応のため動作しない
}
});
}
}
function onPlayerReady(event) {
event.target.mute(); //音声をミュートに
event.target.playVideo(); //動画再生
}