Narrative Theme - Video is not playing in mobile mode

Topic summary

Issue: In the Narrative theme, slideshow videos play on desktop but not on mobile. Root cause is a theme rule that disables video below ~749px width and mobile code that doesn’t initialize video playback.

Findings: Phones in portrait fall under the threshold; rotating may play but can distort layout. Android devices worked in tests; iOS (Safari/Chrome) did not autoplay.

Proposed fix (community workaround requiring code edits in 3 files):

  • theme.scss.liquid: Remove/comment the small-screen media query that hides .slideshow__video and its iframe.
  • theme.js: In the Slideshow Mobile Extension, add the video initialization used on desktop (e.g., call _loadVideo before slide checks, include _promiseVideo flow). This ensures videos load/play on mobile.
  • iOS autoplay: Additional adjustments included to enable autoplay on iOS devices.

Notes and caveats:

  • Back up files before editing. Around the 749px breakpoint the video reloads when switching between mobile/desktop widths.
  • Some shared store URLs were password-protected, limiting external verification.
  • Code snippets are central to the solution.

Status: No official theme update noted. A community-provided code workaround appears to resolve mobile playback and iOS autoplay for those who implement it.

Summarized with AI on January 27. AI used: gpt-5.

store URL is copeland-audio.myshopify.com

Password: Estilla01

Thanks a lot !