YouTubeのショート動画の埋め込みをする

YouTubeのショート動画の埋め込み方法に少し迷ったので、埋め込み方法についてメモ。

設定方法

通常のYouTube動画だと、動画ページの 共有 > 埋め込む から埋め込みコードを取得できますが、ショート動画の場合は 共有 のメニュー内に埋め込みの項目がありませんでした。

動画を右クリック > 埋め込みコードをコピー を選択すると、埋め込みコードを取得することができるようです。

以下のようなコードをコピーできました。

<iframe width="320" height="560" src="https://www.youtube.com/embed/M0AZnyNf_8Y" title="✦ .* きゅうくらりん┊天宮こころ 〖 歌ってみた 〗 #shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

ショート動画埋め込みのデモページ

YouTube Player APIを使っての埋め込みもできるようです。

<div id="sample"></div>

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
	new YT.Player('sample', {
		width: 320,
		height: 560,
		videoId: 'M0AZnyNf_8Y'
	});
}

APIでのショート動画埋め込みのデモページ

ちなみに、動画の幅と高さを指定していない場合(横長の動画の場合)、ショート動画ではなく通常の動画のUIになるようです。

<div id="sample"></div>
<div id="sample2" class="short"></div>

.short {
	width: 320px;
	height: 560px;
}

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
	new YT.Player('sample', {
		videoId: 'M0AZnyNf_8Y'
	});
	new YT.Player('sample2', {
		videoId: 'M0AZnyNf_8Y'
	});
}

APIでのショート動画埋め込みのデモページ2