I'm using the SwiperJS in a NextJS project that contains a mixed slide content. I'm facing a double sound problem with the react-youtube component.
My swiper configurations uses the loop:true, but I figured out that this is what is causing the double sound, because all slides are duplicated. Than when the active slide is the video I set him to play, but that causes the duplicated slide play also.
If I remove the loop:true, it works fine. But I need maintain the loop:true on my project.
One solution that I tried but didn't have any effect was to find the Swiper Carousel wrapper and then get an iframe array, which I get the position 1 that is the duplicated video to try to stop him from playing
document.querySelector('[id^="Main_Carousel"]')
.getElementsByTagName('iframe')[1]
.contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'stopVideo' }), '*');