Autoplay Video on Product Page with unmute button

artwithlauren
Visitor
1 0 0

Hello Shopify Community,

 

I'm running an ad campaign where people land on this page: https://www.artwithlauren.com/products/weekly-art-club-for-kids

 

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)

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

<style>
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;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('Deferred-Poster-Modal-38651478278441').click()
    let originalSrc;
    
    setTimeout(() => {
        originalsrc=document.querySelector('iframe.js-vimeo').src;
        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')) {
            document.querySelector('iframe.js-vimeo').classList.add('unmuted');
            document.querySelector('iframe.js-vimeo').src=originalSrc;
        }  
    });
});
</script>

 

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

 

ThePrimeWeb_0-1716994422591.png

 

 

 

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!

ThePrimeWeb_1-1716994455147.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!