モバイルで動画背景が再生されない – ZenBlocks buttonBasic
結論
モバイルでの動画背景の非再生は、**ブラウザ側の自動再生ポリシー制限**が主な原因です。iOS Safari / Android Chrome はバッテリーとデータ通信の節約のため、動画の自動再生に制約を設けています。フォールバック画像を設定することで、どの端末でも適切な表示を保証できます。
—
原因
- **iOS Safariの自動再生制限**: iOS では、音声なし・インライン再生・ユーザー操作なしの条件を満たさないと動画が自動再生されません。特にLow Power Modeでは完全に無効になる場合があります。
- **データセーバーモード**: Android Chrome のデータセーバーや「ライトモード」有効時、動画の自動読み込みが制限されます。
- **動画ファイルのサイズ**: ファイルサイズが大きすぎると、モバイル回線で読み込みが完了せずに表示されないことがあります。
- **動画フォーマットの非対応**: 一部の古いブラウザでは特定のコーデックに対応していないことがあります。
解決手順
- 背景設定パネルを開く
- 動画背景と合わせて、**フォールバック用の静止画像**を設定する
- 動画が再生できない環境ではこの画像が表示されます
- ファイルサイズを **5MB以下** に抑える（推奨: 2MB以下）
- 解像度をモバイル想定の場合 **720p以下** にする
- フォーマットは **MP4（H.264コーデック）** を使用（最も広い互換性）
- 音声トラックを含まないようにする
- PC向けには動画背景を使用
- タブレット・スマホ向けには静止画像背景を使用する設計が確実です
- レスポンシブ設定でデバイスごとの背景を個別に指定できます
注意点
動画背景はページ速度（Core Web Vitals）に影響します。LCP（Largest Contentful Paint）のスコアが下がる可能性があるため、ファーストビュー以外での使用も検討してください。
動画背景にオーバーレイを設定すると、動画が再生できない場合でもフォールバック画像 + オーバーレイで見た目を維持できます。