fslightboxで開いた時にYoutubeを自動再生する（PC）

LightBox系のライブラリーfslightbox.jsで、YouTubeリンクを開いた時に自動再生させる方法の簡易メモ。

JQueryからvanilla JSに移行した時に、まだFancyBoxがver 3でvanilla JSに対応して無かったから、代わりに見つけてから使用しているのがfslightbox。

シンプルで結構使いやすく、Proライセンスが1回の支払いで、プロジェクト数に制限がない所がいい。
最近はサブスク系が多いので、買い切りは助かる。

URLをwatchじゃなくてembedを使う

YouTube動画ページのURLはwatchで、パラメーターにautoplay=1を付けても自動再生できなかったのだが、埋め込み用iframeのsrcのURLにしたら無事自動再生出来た。

// ページのURLだと自動再生出来ない
https://www.youtube.com/watch?v=ABCDEFGH?autoplay=1

// iframe用のURLだと自動再生出来る
https://www.youtube.com/embed/ABCDEFGH?autoplay=1

簡単な違いだけど結構悩んだ。
ただブラウザによっては自動再生されないケースもあった、Chromeでは自動再生されなかった。

iframeのDOMをfslightboxインスタンスのソースにした場合

別の方法としては、埋め込み用iframeのDOMをJavaScriptで生成し、fslightboxインスタンスのソースにしてみた、これでもいけた。

// ボタン取得
const btn = document.querySelector('#open_btn');

// YouTubeのiframeのDOMを生成
let fsYtIframe = document.createElement('iframe');

const fsYtAttrs = {
	width: '1920',
	height: '1080',
	src: 'https://www.youtube.com/embed/ABCDEFGH?autoplay=1',
	title: 'YouTube video player',
	frameBorder: '0',
	allow: 'fullscreen *; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
};

Object.keys(fsYtAttrs)
	.forEach(
		(key) => {
			fsYtIframe.setAttribute(key, fsYtAttrs[key]);
		}
	);

// fslightboxのインスタンスを生成
const fsInstance = new FsLightbox();

btn.addEventListener('click', () => {
	fsInstance.props.sources = [fsYtIframe];
	fsInstance.open();
});

YouTube Player APIで追加した埋め込み動画をソースにする場合

自動再生ケースとは別だが、通常はaタグのhrefに埋め込みiframeのidをアンカーとして設定し、data-fslightbox属性を追加すれば、簡単にlightboxで開くのだが、YouTube Player API で追加した動画の場合、開かなかった。

原因はaタグが読まれたタイミング時に、指定したiframe動画が存在しなかったからのようだ。
APIでYouTube動画を追加したあとに、fslightboxのrefreshFsLightbox()を使うことで、開く動画を関連づけ直す事ができた。