Help Needed: Video Autoplay Not Working on Dawn Theme

Store Design
1

Hi everyone,

I’m trying to get a video to autoplay on my Shopify store using the Dawn theme. I’ve already enabled the autoplay setting in the theme editor, and when I check the code, it shows that autoplay is enabled. The video is also muted/silent, so it should meet browser requirements for autoplay.

Despite this, the video still won’t autoplay when I load the page. I’ve tested across different browsers and devices, but the issue persists.

Has anyone run into this problem with Dawn before? Is there an additional setting, Liquid snippet, or JavaScript tweak I need to apply to make autoplay work properly? Any guidance would be greatly appreciated.

Thanks in advance!

2

Hey @STQKON_Bytes

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Thank you so much!

Password: 123456

4

Hey @STQKON_Bytes

I can’t tell you an exact solution without having a look of your video section code but I suggest you give this a try.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<script>
(function() {
  function forceAutoplayVideos() {
    document.querySelectorAll('deferred-media[data-media-id]').forEach(function(deferredMedia) {

      if (deferredMedia.querySelector('video:not(template video)')) return;
      
      const template = deferredMedia.querySelector('template');
      if (template && template.content.querySelector('video')) {
        const video = template.content.querySelector('video').cloneNode(true);
        video.muted = true;
        video.playsInline = true;
        video.autoplay = true;
        video.loop = true;
        
        const poster = deferredMedia.querySelector('.deferred-media__poster');
        if (poster) poster.style.display = 'none';
        
        deferredMedia.appendChild(video);
        video.play().catch(function(e) {
          console.log('Autoplay prevented:', e);
        });
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', forceAutoplayVideos);
  } else {
    forceAutoplayVideos();
  }
  
  window.addEventListener('load', forceAutoplayVideos);
})();
</script>

RESULT:

image
image1902×909 153 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

5

Moeed, thank you so much! It worked, appreciate it!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.