Video Autoplay In Product Images On Palo Alto Theme?

anika01
Visitor
3 0 0

Hi! 

I'm trying to figure out how to autoplay product videos in the Palo Alto theme.

 

Does anyone have a simple code? The codes I've tried so far haven't worked for my theme. I also have a very basic knowledge of code.

 

An example of my product page is linked here:

https://www.plantdpots.com/products/juno-off-white-sphere-planter-chartreuse-moss-cover

 

Thank you!

Screenshot 2023-12-13 at 3.44.39 PM.png

 

Replies 5 (5)

PageFly-Oliver
Shopify Partner
878 190 174

Hi @anika01 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
window.addEventListener('load',(event)=>{
if($('span.deferred-media__poster-button').length>0){
$('span.deferred-media__poster-button')?.click()
}

});
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

anika01
Visitor
3 0 0

Hi Oliver,

Thanks for your reply! It's still not playing product videos automatically when the page loads.

 

Anika

PageFly-Oliver
Shopify Partner
878 190 174

You can re-try

<style>
window.addEventListener('load',(event)=>{
setTimeout(()=>{
if($('span.deferred-media__poster-button').length>0){
console.log('check elememt',$('span.deferred-media__poster-button'))
$('span.deferred-media__poster-button')?.click()
}
},2000)


});
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

anika01
Visitor
3 0 0

It's still not working 😞 

Pedro_73
Shopify Partner
28 1 14

it worked for me like this: 

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    setTimeout(() => {
        const button = document.querySelector('span.deferred-media__poster-button');
        if(button) {
            console.log('Elemento encontrado:', button);
            button.click();
        }
    }, 2000);
});
</script>