How to Autoplay product videos

Technical Q&A
, ,

Topic summary

A Shopify store owner using the Dawn theme sought help making product videos autoplay instead of requiring users to click play, particularly on mobile devices where customers were mistaking videos for static images.

Initial Suggestions:

  • Several users recommended editing the <video> tag in main-product.liquid to add autoplay, muted, loop, and playsinline attributes
  • One user noted this advice was AI-generated and inaccurate, explaining that Dawn already includes autoplay by default, with playback controlled via JavaScript

The Problem:

  • Videos weren’t autoplaying on mobile (iPhone Safari)
  • When users navigated between media items and returned to a video, it remained stopped
  • Videos weren’t positioned first in the media gallery

Working Solution:

  • A custom JavaScript snippet added via “Custom Liquid” section in the product page template
  • The code extends Dawn’s media-gallery component to automatically play videos when slides change
  • Also includes CSS to hide the video modal opener and display deferred media properly
  • The solution was confirmed working by the original poster on mobile devices
Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
20

Ok, yes, the original code I gave you was not good for mobile devices.
Try this one instead – again, paste into “Custom Liquid” section in Product page template:

<script>
  window.addEventListener('load', ()=>{
    const mgs = document.querySelectorAll('media-gallery');
    const MG = customElements.get('media-gallery');
    
    if (!MG) return;
    
    function playActiveMedia(activeItem) {
      window.pauseAllMedia();
      const deferredMedia = activeItem.querySelector('.deferred-media');
      if (deferredMedia) deferredMedia.loadContent(false);
      let v = activeItem.querySelector('video');
      if (v && v.played.length > 0) v.play();
    }
    
    function mainSlideChanged(event) {
      this.playActiveMedia(event.detail.currentElement);
    }

    
    MG.prototype.playActiveMedia = playActiveMedia;

    mgs.forEach( e => {
       e.elements.viewer.addEventListener("slideChanged", debounce( mainSlideChanged.bind(e), 250));
    });
  });

</script>
<style>
.product__modal-opener--video {
  display: none !important;
}

deferred-media.deferred-media.media.media--transparent {
  display: block;
}
</style>

Seems to be working in my test store: Vodka Cruiser Black Guava 275mL 4-pack – BBK Market

1 Like