What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How to autoplay product videos - Dawn theme

How to autoplay product videos - Dawn theme

saikocollective
New Member
11 0 0

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!

Replies 11 (11)
saikocollective
New Member
11 0 0

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.

EYCB
Shopify Partner
70 5 13

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.

banned
EYCB
Shopify Partner
70 5 13

consider the below line of code ie

data-slick='{ "slidesToShow": 1, "slidesToScroll": 1, "arrows": true, "fade": true, "draggable": false, "autoplay": true, "autoplaySpeed": 5000 }'

 

banned
saikocollective
New Member
11 0 0

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

pawankumar
Shopify Partner
627 93 115

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 ?

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
saikocollective
New Member
11 0 0

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

EYCB
Shopify Partner
70 5 13

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

banned
saikocollective
New Member
11 0 0

Amazing, must just be my phone and browser!

EYCB
Shopify Partner
70 5 13

Possibly it could be!

banned
Asiela
Excursionist
16 2 1

@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

missblenny_2
Tourist
3 0 0

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-w...