Youtube動画を自動再生&ループ再生させる
公開日:2024年12月09日 最終更新日:2024年12月10日
IFrame Player APIを使用して動画を自動再生&ループ再生させます。
音声はミュート(mute)です。
playerVarsプロパティで設定する
playerVarsプロパティでサポートされている自動再生・ループ再生のパラメータを使用します。
https://developers.google.com/youtube/player_parameters?hl=ja
DEMO
HTML
<div class="player1">
<div id="player1"></div>
</div>
CSS
動画をレスポンシブ対応させるためのCSSです。
.player1 {
padding-top: 56.25%; /* アスペクト比16:9 */
position: relative;
width: 100%;
}
.player1 iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
JavaScript
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = {}; // プレイヤーを管理するためのオブジェクト
function onYouTubePlayerAPIReady() {
players['player1'] = new YT.Player('player1', {
height: '720',
width: '1280',
videoId: 'chZY9qdWVRA',
playerVars: {
autoplay: 1, // 自動再生を有効化
mute: 1, // ミュートを有効化
loop: 1,
modestbranding: 1, // YouTube ロゴ非表示
iv_load_policy: 3, // 動画アノテーションを非表示
controls: 0, // コントロールバーを非表示
disablekb: 1, // キーボード操作無効
rel: 0, // 再生した動画と同じチャンネルから関連動画が選択
playsinline: 1 // インライン再生
}
});
}
eventsプロパティで設定する
eventsプロパティのonPlayerReadyとonPlayerStateChangeを使用して自動再生・ループ再生させます。
DEMO
HTML
<div class="player2">
<div id="player2"></div>
</div>
CSS
動画をレスポンシブ対応させるためのCSSです。
.player2 {
padding-top: 56.25%; /* アスペクト比16:9 */
position: relative;
width: 100%;
}
.player2 iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
JavaScript
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = {}; // プレイヤーを管理するためのオブジェクト
function onYouTubePlayerAPIReady() {
players['player2'] = new YT.Player('player2', {
height: '720',
width: '1280',
videoId: 'chZY9qdWVRA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars: {
modestbranding: 1, // YouTube ロゴ非表示
iv_load_policy: 3, // 動画アノテーションを非表示
controls: 0, // コントロールバーを非表示
disablekb: 1, // キーボード操作無効
rel: 0, // 再生した動画と同じチャンネルから関連動画が選択
playsinline: 1 // インライン再生
}
});
}
// プレイヤーが準備完了したときの処理
function onPlayerReady(event) {
event.target.playVideo(); // 動画を再生
event.target.mute(); // 動画をミュート
}
// プレイヤーの状態が変わったときの処理
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
event.target.seekTo(0, true); //動画の初めにシーク
event.target.playVideo(); //動画を再生
}
}