Automatically launch and loop the video on my product page

WriteProject · ‎07-02-2024

Bonjour,

Mon site : https://write-store.com/products/crayon-eternel

J'ai une vidéo de mon produit (le deuxième carré sous la photo de mon produit).

J'aimerais une chose :

- je clique sur le petit carré de ma vidéo, ça ouvre et lance ma vidéo, et ma vidéo tourne en boucle.

J'ai trouvé le code suivant dans une autre publication mais je n'arrive pas à le faire fonctionner :

{% if template contains  'product' %}
<script>
window.addEventListener('load',()=>{
 const runVideo=()=>{
    const btn=$('.is-active span.deferred-media__poster-button.motion-reduce')[0]
    if(btn){
        btn.click()
    }  
}
    runVideo()
    $('media-gallery .thumbnail-slider ul li').each((i,item)=>{
        $(item).on('click',()=>{
          const video=$('media-gallery .product__media-list li video')[i]
            if(video){
                video.play()
            }
        })
    })
});
</script>
{% endif %}

J'ai déposé ce code dans le <body> dans mon theme.liquid et j'ai changé les class mais le code ne fonctionne toujours pas.

Avez vous des pistes s'il vous plait ? 🙂

Je reste disponible rapidement pour des compléments d'information !
Merci d'avance si vous pouvez m'aider !

Theo.

BSSCommerce-TC · ‎07-02-2024

Hi @WriteProject ,

I recommend using the document object to query the DOM. It will be fixed as follows:

{% if template contains 'product' %}
<script>
document.addEventListener('load', () => {
    const runVideo = () => {
        const btn = document.querySelector('.is-active span.deferred-media__poster-button.motion-reduce');
        if (btn) {
            btn.click();
        }
    }
    
    runVideo();

    const thumbnails = document.querySelectorAll('media-gallery .thumbnail-slider ul li');
    thumbnails.forEach((item, i) => {
        item.addEventListener('click', () => {
            const video = document.querySelectorAll('media-gallery .product__media-list li video')[i];
            if (video) {
                video.play();
            }
        });
    });
});
</script>
{% endif %}

We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

WriteProject · ‎07-03-2024

Hello BBSCommerce,

Thank you for your reply. Unfortunately I can't get your code to work.

I copied it and pasted it into the <body> of my theme.liquid file as you can see in the screenshot below :

Yet there's been no change in behaviour at the front.

Do you know why ?

Thanks in advance 🙂

Theo

Automatically launch and loop the video on my product page

Automatically launch and loop the video on my product page

Community Blog Articles