Autoplay Video on Product Page with unmute button

1 0 0

Hello Shopify Community,


I'm running an ad campaign where people land on this page:


I'd like for the product video to autoplay with a button to "unmute". The autoplay + unmute button works on a traditional Vimeo embed, but I haven't been able to get it to work as a product media video. 


I'm on the Studio 14 theme. 


Has anyone found a way to get this to work?

Reply 1 (1)

Shopify Partner
2138 614 487

Hey @artwithlauren,


After a few tries and some coffee later, I managed to get this. The only part I can't fix (Vimeo Limitation) is that when you click unmute, the video will restart. The only way I could control it is to write a code where the autoplay is muted, and then when you click unmute, the video reloads unmuted. 



Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" tag paste the following. Screenshot attached for reference.

deferred-media {
    position: relative !important;

deferred-media:has(iframe.js-vimeo:not(.unmuted)):before {
    position: absolute !important;
    content: "Unmute" !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: white !important;
    z-index: 99 !important;
    background-color: rgba(var(--color-button),var(--alpha-button-background)) !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    cursor: pointer !important;

document.addEventListener('DOMContentLoaded', () => {
    let originalSrc;
    setTimeout(() => {
        document.querySelector('iframe.js-vimeo').src=originalSrc + '&background=1';
    }, 300)
    document.querySelector('deferred-media').addEventListener('click', function() {
        if(!document.querySelector('iframe.js-vimeo').classList.contains('unmuted')) {


Screenshot is for reference only, the correct code to paste is the one shown above.






Note: In any case it doesn't work (or is not always working) just increase this value in increments of 300 (300,600,900, ....) until you find the sweet spot!




Was I helpful?

Buy me a coffee


Need help with your store? or check out the website
Check out our interview with Shopify!