Video Background Not Playing on Mobile – ZenBlocks buttonBasic
Summary
Video backgrounds not playing on mobile is primarily caused by **browser autoplay policy restrictions**. iOS Safari and Android Chrome impose restrictions on video autoplay to conserve battery and data usage. By setting a fallback image, you can ensure appropriate display across all devices.
—
Solution Steps
- Open the Background Settings panel
- Along with the video background, set a **fallback static image**
- This image will be displayed in environments where the video cannot play
- Keep file size **under 5MB** (recommended: under 2MB)
- Set resolution to **720p or lower** for mobile use
- Use **MP4 (H.264 codec)** format (widest compatibility)
- Remove the audio track from the video
- Use video background for PC
- Use static image background for tablet and smartphone for reliable display
- You can specify different backgrounds per device using responsive settings
- Video backgrounds affect page speed (Core Web Vitals). They can lower your LCP (Largest Contentful Paint) score, so consider using them outside the above-the-fold area as well.
- Setting an overlay on the video background ensures visual consistency with fallback image + overlay even when the video cannot play.
Related Settings
関連設定
– [背景設定](../background/) – 背景画像・動画・オーバーレイ
– [表示設定](../display/) – デバイス別の表示/非表示制御