How to autoplay product videos - Dawn theme

Shopify Discussion
1

Hi, I’m wanting to autoplay, loop and hide the controls on my product videos so that if someone was to click the video from the thumbnail carousel, it will automatically play and loop without them needing to press the play button/click on the video again on both mobile and desktop.

I believe that they are automatically set to autoplay because my product videos don’t have sound and therefore are already muted. It autoplays when I visit my site on Google Chrome on my laptop but when I try on mobile Google Chrome I have to press play and mess around with the video a bit before it plays.

If possible would someone have the code to do this so that I can just paste it into the bottom of the base.css file?

My site is saikocollective.com.

Thanks!

2

Hi Saikocollective I think this could help.

data-slick=‘{ “slidesToShow”: 1, “slidesToScroll”: 1, “arrows”: true, “fade”: true, “draggable”: false }’

, “autoplay”: true, “autoplaySpeed”: 5000

data-slick=‘{ “slidesToShow”: 1, “slidesToScroll”: 1, “arrows”: true, “fade”: true, “draggable”: false, “autoplay”: true, “autoplaySpeed”: 5000 }’

see if this works.

3

consider the below line of code ie

data-slick=‘{ “slidesToShow”: 1, “slidesToScroll”: 1, “arrows”: true, “fade”: true, “draggable”: false, “autoplay”: true, “autoplaySpeed”: 5000 }’

4

Thanks for the suggestion. I used the code and it worked perfectly (autoplayed, looped and hid controls) on desktop Google Chrome, however on mobile Google Chrome it’s still the same unfortunately.

Tried it on Safari and as you said, autoplay didn’t work and the controls weren’t hidden, however it did loop.

5

Thanks for the code suggestion. No luck with this unfortunately.

6

It seems like you managed to fix it
I checked it on https://saikocollective.com/products/nagoya-vertical-bar-necklace product and video is playing when i click thumbnail.
Do you want something else ?

7

Was this when you used Google Chrome on mobile? And it autoplayed, looped and controls were hidden when you clicked the carousel thumbnail?

8

We opened it from google chrome on mobile and it is working properly and same as in the desktop.

9

Amazing, must just be my phone and browser!

10

Possibly it could be!

11

Instead of inserting a video section, I put a custom liquid section and then inserted an embedded code of the youtube-video.

On my website, I see the youtube video’s thumbnail, no autoplay, but only one click away (instead of two as you described).

To generate such a code, you can enter the Youtube-Link here: http://embedresponsively.com/

More info you’ll find here: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#insert-videos-with-the-rich-text-editor

12

@saikocollective did you ever get this resolved correctly? I am aiming to achieve the exact same thing as you. When viewing your product pages on desktop, the videos autoplay and the controls are removed. But when accessing via mobile (On Chrome), the controls are still present and the video does not autoplay