My video wont stop playing when i stop hovering on the thumb nail

I tried making a thumbnail to play a YouTube video when I hover and stop playing when I stop hovering on it, but it doesn't stop when the mouse isn't hovering on it.Here's the code:

<div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\meyra.jpg" alt="Thumbnail 1"><div class="video-overlay"></div></div><script>  function onYouTubeIframeAPIReady() {    const thumbnails = document.querySelectorAll(".thumbnail");    thumbnails.forEach(function(thumbnail) {      const videoOverlay = thumbnail.querySelector(".video-overlay");      const videoId = thumbnail.dataset.videoId;      thumbnail.addEventListener("mouseenter", function() {        const player = new YT.Player(videoOverlay, {          videoId: videoId,          width: "100%",          height: "100%",          playerVars: {            autoplay: 1,            controls: 0,            rel: 0,            showinfo: 0          }        });        videoOverlay.style.display = "block";      });      thumbnail.addEventListener("mouseleave", function() {        videoOverlay.innerHTML = "";        videoOverlay.style.display = "none";      });    });  }</script>

I want the YT video to stop playing when I stop hovering on the thumbnail