【Vanilla JS】オープニングで動画を自動再生する（videoタグ使用）

概要

用途・要件

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

検証ブラウザ

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

注意事項

• ユーザーがデバイスを「省電力モード」に設定していると自動再生されない。（例:safari）

実装