I am having the hardest time figuring this 'seemingly' simple thing out.

I have a set of video. Each video is accompanied by a button that I want to hover over to play/pause the video.

This below implementation just plays the first video on button hover, but not the others.

I don't know what I'm doing wrong and I need your help as a noob.

div class="video_wrapper">

<video class="video" style="object-fit: contain; overflow:hidden" preload="preload" loop="loop" muted="muted" playsinline="playsinline"> 
    <source src="/url" type="video/mp4">
</video>      

JS:

const items = document.querySelectorAll('.testbutton');
const videos = document.querySelectorAll(" .video_wrapper .video");

for (const video of videos) {
items.forEach(item => {
    const video = document.querySelector('.hover_video_wrapper .video');

    item.addEventListener('mouseover', function () {
        video.play();
    });

    item.addEventListener('mouseout', function () {
        video.pause();
    });
});

}