Product video NOT working on mobile (Refresh Theme)

Technical Q&A

Topic summary

A product video displays correctly on desktop but fails to play on mobile devices, despite testing both MP4 and MOV formats with a 120MB file size.

Root Cause:

  • Most mobile browsers (especially iOS) restrict or block video autoplay
  • Large file sizes and certain formats may not be optimized for mobile streaming
  • The Refresh theme’s default video implementation may lack required mobile playback attributes

Recommended Solutions:

Format & Compression:

  • Convert to H.264 encoded MP4 with AAC audio
  • Reduce file size to 10-20MB maximum
  • Keep resolution at 1080p or lower

Technical Implementation:

  • Add playsinline attribute (enables in-page playback on iOS)
  • Include controls attribute (allows tap-to-play)
  • Use muted attribute (increases autoplay compatibility)
  • Add preload="metadata" to prevent excessive data usage

Alternative Approach:

  • Upload to YouTube or Vimeo and embed via iframe for better mobile compatibility

Status: Multiple solutions provided, awaiting implementation feedback from original poster.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone.

We have run into a problem on our product page for a new product: https://cleanfriend.dk/products/cleanfriend-scrub

The product video (next to hero image), will not play on mobile but only on pc.

We have both tried with mp4 and mov format, but it does not seem to work.

The file is about 120 MB, so that is not the problem.

Does anyone have any idea what could be the issue?

1 Like
2

Most of the Mobile Browsers doesn’t support Auto-play. Make sure your setting for the Auto-play should be on.

3

Hi @Anders_CF
I hope you are doing well,
Most of the mobile browsers doesn’t support video autoplay
although, you can use mp4 video, use video tag
apply playinline attribute etc..
Like this

using playsinline with muted works most of the time but still it doesn’t work sometimes due to browser restrictions

Thanks!

4

Hello @Anders_CF I checked the product page on Cleanfriend.dk and understand you’re using the Shopify Refresh theme with a video in the product media gallery. Here’s what’s happening and how to fix it.

Root Cause
Shopify themes (like Refresh) typically embed product videos using the

. The file format

. The way it was uploaded (direct upload vs. YouTube/Vimeo)

. Theme-specific lazy loading or autoplay settings

…you can run into mobile playback issues—especially on iOS devices, which restrict autoplay and large videos over cellular networks.

Observed Issues
When inspecting the mobile view:

. The video doesn’t play on tap.

. The placeholder (poster image) is visible, but no controls or playback start.

. This is especially common with .mov files or non-streaming optimized MP4s.

Fix Options

  1. Ensure Proper Format & Compression
    . Convert the .mov or .mp4 to H.264 encoded MP4 with AAC audio (this ensures max compatibility).

. Use a tool like HandBrake or export from Adobe Media Encoder.

. Keep the resolution at 1080p or lower, and reduce the file size to ~10–20MB max for fast mobile loading.

. Tip: Even though 120MB isn’t a “problem” technically, mobile browsers often block or delay large media.

  1. Upload as “Custom Video” in Shopify Files
    Instead of uploading to the product media section:

  2. Go to Settings > Files in Shopify Admin.

  3. Upload the optimized MP4 file.

  4. Copy the file URL.

  5. Manually Embed the Video on the Product Page
    Inside the product description, use custom HTML to embed the video and ensure it works on mobile:

Replace the src with your Shopify Files URL.
You can also add a poster=“image-url.jpg” for a preview image.

. playsinline: Ensures playback in-page on iOS.

. controls: Allows users to tap to play.

. preload=“metadata”: Prevents large data usage on load.

  1. Alternative: Use YouTube or Vimeo
    If you want a lightweight and widely compatible option:

. Upload the video to YouTube or Vimeo (unlisted if needed).

. Embed it using an iframe in the product description:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen=""></iframe>

Optional: Add Mobile Video to Media Gallery
If you must keep the video in the Shopify media gallery (instead of the product description), you can:

. Use an .mp4 file < 20MB uploaded directly via the product media editor.

. If it still fails, you’ll need theme customization to override how videos are rendered, ensuring playsinline and controls are enforced on mobile.

Thank you :blush: