How to stop youtube video when you click a button?

Question

I’m making a website with React and I have a carousel with some Iframes with youtube videos, when I slide to the next video the previous one is still playing.

Is there any way with Jquery or JS to stop playback when clicking a button?

You have a better option than Iframe to do this?

I found a solution with Jquery, but it is in a very old version: Old solution (2.1.3) I tried to modify it to a more current version but it didn’t work, I’m new to Jquery.

This is the current code:

jsx

<div className='video-frame'>
                    <iframe className='video-frame' width="560" height="315" src="https://www.youtube.com/embed/LW1D0TfMogg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                </div>

Jquery

$('.next-bt').on("click",function(){
$('.video-frame')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');});

Whoever can help me thank you.