HTML

<div id="ytplayer"></div>

JavaScript

//youtube 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 player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('ytplayer', {
		videoId: 'YouTube 動画 ID',
		width: '640',
		height: '360',
		playerVars: {
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

//動画開始時
function onPlayerReady(ev) {
}

//動画修了時
function onPlayerStateChange(ev) {
}

主な playerVars パラメータと設定例

サポートされるパラメータ

autoplay: 1(デフォルト 0)自動再生する
※ただし mute に設定しなければ効かない
modestbranding: 1YouTubeロゴを非表示にする
fs: 0全画面表示ボタンを非表示にする
controls: 0動画プレーヤーのコントロールを非表示にする
動画アノテーションを非表示にする
start: 10動画を10秒後に開始する
playsinline: 0または1
※2022年5月時点のデフォルト値は0だが
変更されることがある。
iOS 上の HTML5 プレーヤーで動画をインラインまたは全画面表示のどちらで再生するかを制御。
0 = 全画面表示で再生
1 = インライン再生
rel: 0同じチャンネルの関連動画を表示する
0にすると別のチャンネルの関連動画が表示される
playlist再生する動画 ID をカンマ区切りのリスト形式で指定

events 設定例

//ミュートに設定して再生 ※autoplay: 1 にする場合はこのように設定
function onPlayerReady(ev) {
	ev.target.mute();
	ev.target.playVideo();
}

//ループ
function onPlayerStateChange(ev) {
	if (ev.data == YT.PlayerState.ENDED) {
		ev.target.playVideo();
	}
}

参考サイト

コメントを残す

メールアドレスが公開されることはありません。