Product videos won't play on mobile

Shopify Discussion
1

I’m using Studio 15.3.1 and running into an issue where videos uploaded to the product page work on desktop but not on mobile. I tried uploading the media directly to Shopify and I also tried pointing to a Vimeo link. A play button shows up in the upper left corner but nothing happens when clicked.

Here is an example if you scroll to the right within the product media: https://www.masterdemos.art/products/mike-hernandez-plein-air-pacific-northwest

2

Hello @masterdemos

I checked your’s product page, and you’re absolutely right: the video shows a play icon on mobile, but tapping does nothing. Here’s what’s likely going wrong and how to fix it:

Diagnosis (Studio Theme 15.3.1 Bug)
This issue appears to stem from:

  1. Theme JavaScript not triggering video playback correctly on mobile.

  2. Shopify’s native media player not fully supporting touch interaction for self-hosted videos inside the Studio theme carousel.

  3. The Vimeo iframe fallback also doesn’t fully activate due to lazy-loading quirks or interaction layering.

Fix (Working Code Injection)
Let’s override the theme’s behavior and manually enable playback with this JavaScript snippet.

Add this code to your theme.liquid before the closing tag:

This code ensures any video inside Shopify’s media container plays when tapped on mobile.

Optional: Add CSS to Prevent Conflicts
Sometimes invisible overlays or z-index issues block interaction. You can safely add this to your CSS (e.g., base.css):

.shopify-model-viewer-ui,
.shopify-video {
  z-index: 1;
  pointer-events: auto;
}

Confirm After Adding:
. Reload the product on a real mobile device (or Chrome DevTools Mobile View).

. Tap the video and verify playback starts.

. You can also remove the Vimeo embed if you’re uploading videos directly to Shopify — native video files perform better in Studio.

Thank you :blush: