Product video NOT working on mobile (Refresh Theme)

[Anders_CF]

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?

[The_ScriptFlow]

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

[pawankumar]

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

<video autoplay loop muted playsinline controls>
  <source src="your_video.mp4">
  <source src="your_video.webm" onerror="fallback(parentNode)">
</video>

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

Thanks!

[goldi07]

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 <video> tag, but depending on:

. 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.

2. Upload as "Custom Video" in Shopify Files
Instead of uploading to the product media section:

1. Go to Settings > Files in Shopify Admin.

2. Upload the optimized MP4 file.

3. Copy the file URL.

3. 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:

<video controls playsinline preload="metadata" width="100%" style="max-width:100%; height:auto;" poster="">
  <source src="https://cdn.shopify.com/s/files/1/XXXXX/XXXXX/files/your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

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.

4. 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 😊