【Vanilla JS】オープニングでYouTube動画を自動再生する（YouTube IFrame Player API使用）

概要

用途・要件

• ページ読み込み時に全画面でモーダルを表示。
• YouTube動画を音声はミュートの状態で自動再生させる。（YouTube IFrame Player API使用）
• YouTube動画が最後まで再生されたら、モーダルをフェードで閉じる。
• もしくは再生途中で「SKIP」ボタンを押すとモーダルをフェードで閉じる。
• フェードはCSSアニメーションで実装。
• 動画は縦横比を維持して見切れない。
• 「SKIP」ボタンは動画の右端に揃えて配置する。
• モーダル表示時は背景のスクロールを禁止（CSSのoverscroll-behavior使用。※Safari v16~）

検証ブラウザ

• Google Chrome(最新)
• Microsoft Edge(最新)
• Firefox(最新)
• Safari(最新)

注意事項

• ユーザーがデバイスを「省電力モード」に設定していると自動再生されない。（例:safari）
• 再生終了のタイミングでモーダルがフェードで閉じるが、モバイルのChromeで一瞬関連動画が見えてしまう。

実装