Hovering over a thumbnail triggers audio but not video using the YouTube API in JavaScript - how can I fix this?

I am trying to make a YouTube video play when I hover on a thumbnail
But it only plays the audio, I can't see the video and it doesn't stop playing when I stop hovering.

Here is the code

HTML

<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 a video to cover up the thumbnail just like a preview in youtube when I hover and stop playing when the mouse stops hovering.

The problem is once you mouseover, youtube replace your .videoOverlay div with iframe. So the reference you selected in videoOverlay variable will no longer work for showing and hiding.

You need to replace

videoOverlay.style.display = "block";

With

this.querySelector('.video-overlay').style.display = "block";

Do the same thing inside mouseleave event handler

this.querySelector('.video-overlay').innerHTML = "";
this.querySelector('.video-overlay').style.display = "none";

EDIT:
To interact with video object, (like you need to play or stop video), then you need to get a reference of player like below.

function onYouTubeIframeAPIReady() {
  const thumbnails = document.querySelectorAll(".thumbnail");

  var player;
  thumbnails.forEach(function(thumbnail) {
    const videoOverlay = thumbnail.querySelector(".video-overlay");
    const videoId = thumbnail.dataset.videoId;

    thumbnail.addEventListener("mouseenter", function() {
      player = new YT.Player(videoOverlay, {
        videoId: videoId,
        width: "100%",
        height: "100%",
        playerVars: {
          autoplay: 1,
          controls: 0,
          rel: 0,
          showinfo: 0
        }
      });

      this.querySelector('.video-overlay').style.display = "block";
    });

    thumbnail.addEventListener("mouseleave", function() {
      this.querySelector('.video-overlay').innerHTML = "";
      this.querySelector('.video-overlay').style.display = "none";
      player.destroy();
    });
  });
}