Background Video - Dawn Theme not playing on mobile or ipad

Technical Q&A
,

Topic summary

A background video implemented in Shopify’s Dawn theme works correctly on desktop but fails to display on mobile devices and iPads, showing only a static background color instead.

Code Implementation:

  • The user has added custom JavaScript to detect mobile devices and apply specific styling
  • Video sources are configured with both WebM and MP4 formats
  • The video element includes autoplay, muted, playsinline, and loop attributes

Proposed Solution:

  • Check if Low Power Mode (battery saver mode) is enabled on iOS devices
  • When Low Power Mode is active, videos cannot autoplay automatically
  • Users need to disable this setting for the background video to function

Status: The discussion appears to have a potential resolution, pending confirmation that disabling Low Power Mode resolves the playback issue. The problem stems from iOS restrictions rather than code errors.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

It works great on desktop. On mobile and ipad it is just a flat static background color. Any help would be greatly appreciated.

Here is the code:

@media screen and (max-width: 750px) { body.mobile-device {background-color: transparent !important; } }
{% section 'main-password-header' %}

{{ content_for_layout }}

{% section 'main-password-footer' %}
  • {{ 'accessibility.link_messages.new_window' | t }}
2

Hi @bkay67

This is Richard from PageFly - Shopify Page Builder App

Make sure that on your iphone and ipad that the low battery mode has been turned off.

If that mode is on, there’s no video can autoplay.

Hope this can help you solve the issue

Best regards,

Richard | PageFly