Video Autoplay In Product Images On Palo Alto Theme?

[anika01]

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!

 

[PageFly-Oliver]

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

[anika01]

Hi Oliver,

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

Anika

[PageFly-Oliver]

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>

[anika01]

It's still not working 😞 

[Pedro_73]

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>