Auto Play Embedded Videos - Product Page & Product Card

Shopify Discussion
,

Topic summary

Goal: Get Shopify product videos to autoplay on mobile and on product cards (homepage). Currently works only on desktop (Sense theme).

Proposed approach:

  • Use JavaScript to mute videos and call play() on DOMContentLoaded.
  • For product card videos, set attributes: autoplay, loop, muted, playsinline. “playsinline” allows inline playback on mobile (especially iOS), a prerequisite for autoplay.

Implementation guidance:

  • Add JS in theme.liquid before the closing tag or in theme.js (not in CSS).
  • Target selectors like .product-video and .product-card-video.

Current status/outcome:

  • After implementing, desktop autoplay still works; mobile and product card autoplay do not work.
  • No verified fix yet in-thread; further troubleshooting was moved to email.

Additional reports:

  • Another user (Xclusive theme) reports the same issue: product card videos not autoplaying.

Key considerations/open items:

  • Mobile browsers block autoplay with sound; ensure videos are muted and inline (playsinline).
  • Theme-specific selectors/markup or lazy-loading may prevent early playback.
  • May require intersection-based play (only when in viewport) or adjusting video sources/hosts.

Attachments:

  • Screenshots included; code snippets are central to the attempted solution.

Status: Unresolved; discussion remains open.

Summarized with AI on December 11. AI used: gpt-5.
6

Could you please send me an email so we can discuss this in more detail? Thank you!