I want to update the refresh theme to not auto-mute videos on product pages.
Currently, videos uploaded to product media are muted when you initially play them and you have to manually un-mute. How do I update the code to fix this?
I want to update the refresh theme to not auto-mute videos on product pages.
Currently, videos uploaded to product media are muted when you initially play them and you have to manually un-mute. How do I update the code to fix this?
Hi from your theme code editor look for the file that is responsible to render the product page. It should be something like main-product.liquid. Track down the media from that file particularly the video tag.
You can look for it with ctrl+f shortcut after clicking inside the editor. The bar will appear below. When you find the tag just set the muted property on the tag to false.
Note: when playing videos unmuted it might not autoplay the videos most particularly on mobile. You can give it a try.
Hi,
Thanks for your advice, I cannot see any ‘mute’ tag in the main-product.liquid tag.
An example product page is: https://footcomfortshoes.co.uk/products/joya-vancouver-light-green
To make the video play with sound, simply remove autoplay=‘autoplay’ from the theme code (see the attached image).
It’s a browser policy: if you want a video to autoplay, it must be muted.
Hey i thought it was better to write code than do all this searching. So in your main-product.liquid file paste this code at the very bottom of everything so after endschema. Now when you click on the video be it on desktop or mobile it will play unmuted from the start.
Note: I coded this up according to your settings of displaying the media which is stacked for desktop and thumbnails for mobile, if you change settings it might not work as expected.
// For desktop
// For mobile
Man this took a lot of me than what i was expecting. But i hope this helps your cause.
Best
Shadab Ali
Hi,
I have tried the code and its working great on desktop, but it isnt working on mobile. Do you have any suggestions?
Thank you for your help ![]()
I am not sure if you changed the layout but i remember that you used thumbnails for mobile and I coded it up accordingly.
Just to make sure can you show thumbnails for your products on mobile to see if it works