I'm trying to have multiple videos to hover over and start a preview video like youtube. Works so far, but only for one video, the first one. How do I make it play on hover for every video? (The videos are the same for testing)

HTML:

<div class="videos" onclick="location.href='video1.html'" style="cursor:pointer; position: relative;">
        <video>
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" />
        </video>
        <b>Video Title</b>
        <p>Video Description</p>
</div>
<div class="videos" onclick="location.href='video2.html'" style="cursor:pointer; position: relative;">
        <video>
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" />
        </video>
        <b>Video Title 2</b>
        <p>Video Description 2</p>
</div>

JS:

function delay(milliseconds){
            return new Promise(resolve => {
                setTimeout(resolve, milliseconds);
            });
        }
                
        const video = document.querySelector("video");
        
        async function startPreview() {
          await delay(300);
          video.muted = true;
          video.currentTime = 1;
          video.playbackRate = 0.5;
          video.play();
        }
        
        function stopPreview() {
          video.currentTime = 0;
          video.playbackRate = 1;
          video.pause();
        }
        
        let previewTimeout = 1000;
        
        video.addEventListener("mouseenter", () => {
          startPreview();
          previewTimeout = setTimeout(stopPreview, 4000);
        });
        
        
        video.addEventListener("mouseleave", () => {
          clearTimeout(previewTimeout);
          previewTimeout = null;
          stopPreview();
        });

When I change "document.querySelector" to "document.querySelectorAll", nothing will happen at all and the first video doesn't play when hovering anymore.

How it looks rn