Videoachtergrond op mobiel
Waarom speelt video soms niet?
– Mobiele browsers blokkeren autoplay in sommige situaties.
– `muted` en `playsinline` zijn vaak vereist.
Aanbevelingen
1. Gebruik een poster-afbeelding.
2. Houd bestandsgrootte klein.
3. Test op iOS en Android apart.
解決手順
### ステップ1: フォールバック画像を設定する
1. 背景設定パネルを開く
2. 動画背景と合わせて、**フォールバック用の静止画像**を設定する
3. 動画が再生できない環境ではこの画像が表示されます### ステップ2: 動画ファイルを最適化する
1. ファイルサイズを **5MB以下** に抑える（推奨: 2MB以下）
2. 解像度をモバイル想定の場合 **720p以下** にする
3. フォーマットは **MP4（H.264コーデック）** を使用（最も広い互換性）
4. 音声トラックを含まないようにする### ステップ3: ブラウザの制約を理解する
以下はプラグイン側では制御できないブラウザの仕様です:
| 環境 | 制約 |
|—|—|
| iOS Safari | autoplay は muted + playsinline が必須 |
| iOS Low Power Mode | 動画自動再生が無効化される |
| Android データセーバー | 動画の自動読み込みが制限される |
| 古いブラウザ | WebM / AV1 コーデック非対応の場合あり |### ステップ4: デバイス別に背景を切り替える
1. PC向けには動画背景を使用
2. タブレット・スマホ向けには静止画像背景を使用する設計が確実です
3. レスポンシブ設定でデバイスごとの背景を個別に指定できます—
注意点
– 動画背景はページ速度（Core Web Vitals）に影響します。LCP（Largest Contentful Paint）のスコアが下がる可能性があるため、ファーストビュー以外での使用も検討してください。
– 動画背景にオーバーレイを設定すると、動画が再生できない場合でもフォールバック画像 + オーバーレイで見た目を維持できます。—
関連設定
– [背景設定](../background/) – 背景画像・動画・オーバーレイ
– [表示設定](../display/) – デバイス別の表示/非表示制御