Hovering over a thumbnail triggers audio but not video using the YouTube API in JavaScript

I am trying to make a YouTube video play when I hover on a thumbnailBut 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

<section class="container photo"><div class="thumbnails"><div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\meyra.jpg" alt="Thumbnail 1"><div class="video-overlay"></div></div><div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\Nouvelle.jpg" alt="Thumbnail 2"><div class="video-overlay"></div></div><div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\BASF.jpg" alt="Thumbnail 3"><div class="video-overlay"></div></div><div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\valmet.jpg" alt="Thumbnail 4"><div class="video-overlay"></div></div><div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\sbb.jpg"  alt="Thumbnail 5"><div class="video-overlay"></div></div><div class="thumbnail" data-video-id="D9N7QaIOkG8"><img src="assets\Hertz.jpg" alt="Thumbnail 6"><div class="video-overlay"></div></div></div></section>

CSS

section.photo{border-bottom: 1px  solid var(--special-color);margin-bottom: 20px;padding: 50px;}.thumbnails {  display: flex;  justify-content: space-around;  flex-wrap: wrap;  width: 100%;}.thumbnail {  position: relative;  width: 450px;  height: 200px;  margin: 10px;  margin-top: 50px;  overflow: hidden;}.video-overlay {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  display: none;  background: rgba(0, 0, 0, 0.8);  z-index: 1;  cursor: pointer;}.video-overlay iframe {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 80%;  height: 80%;}

<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 also put the YouTube API at the start of the body in the HTML document

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.