Film z youtuba wyświetlany jako POPUP w javascript. Po zamknięcie POPUP film dalej się odtwarza.

Question

Cześć,

moje pytanie dotyczy wyświetlania filmu jako wyskakujący POPUP na stronie. Na stronie wyświetla się obraz i po jego kliknięciu wyskakuje POPUP i film z Youtuba się pięknie odtwarza. Film zaczyna odtwarzać się automatycznie w wyłączonym dźwiękiem. Wszystko działa pięknie do puki nie włączę dźwięku i nie zamkną okienka POPUP. Wtedy okno się zamyka a film się odtwarza dalej. Nie wiem jak mam zatrzymać odtwarzanie filmu po zamknięciu okna POPUP. Poniżej kod.

<div class="gallery-mo">
    
        <span class="thumbnail-mo"><img style="width: 100%;" src="baner.jpg" ></span>  
</div>

    <div class="popup-mo hidden-mo">
            <button class="popup__close-mo">x</button>
             
     <iframe class="popup__video-mo" width="560" height="315" src="https://www.youtube.com/embed/4ccoihuvQyg?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>       
            
    </div>
    
    <script>
    
    
    const THUMBNAIL = document.querySelectorAll(".thumbnail-mo img");
    const POPUP = document.querySelector(".popup-mo");
    const POPUP_CLOSE = document.querySelector(".popup__close-mo");
    const POPUP_IMG = document.querySelector("popup__video-mo");
    //console.log(THUMBNAIL);
    
    THUMBNAIL.forEach((thumbnail) => {
        thumbnail.addEventListener("click", (e) => {
        POPUP.classList.remove("hidden-mo");
        POPUP_IMG.src = e.target.src;
        }
        )});
        
    POPUP_CLOSE.addEventListener("click", () => {
        POPUP.classList.add("hidden-mo");
        });
    
   
    </script>

Bardzo proszę o pomoc w rozwiązaniu i w zrozumieniu tego problemu.

Answer 1

player.stopVideo()

https://developers.google.com/youtube/iframe_api_reference?hl=pl#odtwarzanie-filmu