How to Autoplay product videos

Technical Q&A
, ,
1

Hey would love some help with dawn theme and how to make product videos autoplay instead of having to press play? thank you

my store is https://eighthandco.com.au/

1 Like
2

Hello @JGBowie ,

I hope you are doing well!

Could you please provide the link to the page where the video appears? It will help me check it and provide the CSS to make the video autoplay.

3

Hey @JGBowie
Nice store — love the clean look For product videos in Dawn, autoplay isn’t on by default, but you can enable it with a small code tweak. Here’s how:

  1. In your Shopify admin, go to Online Store → Themes → Edit code.
  2. Open the file: main-product.liquid (sometimes under sections/).
  3. Look for the <video> tag inside the product media loop. It usually looks something like:
<video
  src="{{ media | media_url }}"
  controls
></video>
  1. Add these attributes to the <video> tag:
<video
  src="{{ media | media_url }}"
  autoplay
  muted
  loop
  playsinline
></video>

Once you save, your product videos should autoplay as soon as they load on the page.

4

On a product page when you click on the video thumbnail first time it should start playing automatically.
However, if you go to another media and then return back to the video, it remains stopped.

If you want it to resume autoplay when you revisit the video slide, then it can be fixed.
Add the “Custom Liquid” section to the product page template and paste this code – updated code see in my posts below

5

Great question, the Dawn theme doesn’t have autoplay enabled by default, but you can adjust it with a small code edit. Here’s how:

Go to Online Store > Themes > Edit code.

Open the main-product.liquid file (or whichever section handles your product media).

Find the video tag — it will look something like <video …> in the code.

Add the attributes autoplay muted loop playsinline.

Example:

6

Hey im not seeing the example?

7

That’s AI generated BS answer.
There is no <video> tag in Dawn as is, the code is like:

And autoplay is there by default. The actual play is controlled by theme Javascript here:

9

Tried to change this to true didnt work :frowning: won’t autoplay on mobile ver

10

It appears on a few of the products Lilah Mini Dress | One-Shoulder Knit with Beaded Strap – EIGHTH & CO.

11

Tried didnt work :frowning: unfortunately

12

On Mobile version it is working. But the video is not at the first place.

Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css

Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.

@media screen and (max-width: 749px) {
.thumbnail-slider .thumbnail-list.slider {
flex-direction: row-reverse;
}

.slider.slider--mobile {

flex-direction: row-reverse;
}
}

This will make the video autoplayed

13

@media screen and (max-width: 749px) {
.thumbnail-slider .thumbnail-list.slider {
flex-direction: row-reverse;
}

.slider.slider--mobile {

flex-direction: row-reverse;
}
} Is this the whole code i am copying and pasting? , pasted at top of theme css didn’t work… made text show on my site and put in css didn’t work

14

Please copy and paste the below code I forget to add !important.

@media screen and (max-width: 749px) {
.thumbnail-slider .thumbnail-list.slider {
flex-direction: row-reverse !important;
}

.slider.slider--mobile {

flex-direction: row-reverse !important;
}
}

15

i tried it in CSS section didnt work and in the theme css where exactly am i putting this code

16

Okay! I got the problem, please allow me sometime I am providing you the code. The issue now is the video is not first selected.

17

It seems you have removed the CSS. But I would like to inform you that video is autoplayed but the video is not at the first place. The only thing when reloading is the video is not appearing at the first place.

19

Using iphone 17 safari and it doesn’t auto play when scrolling to video you have to tap it to play it , also watching alot of customer replays and they completely miss the video thinking its a image

1 Like
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
21

Amazing thank you so much this worked ! :slight_smile:

1 Like