YouTube API で動画埋め込み

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: 1	YouTubeロゴを非表示にする
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();
	}
}

---

参考サイト

• iframe 組み込みの YouTube Player API リファレンス
• YouTubeのパラメータを色々試してみる