Me está costando mucho entender esta cosa 'aparentemente' simple.

Tengo un conjunto de video. Cada video está acompañado por un botón sobre el que quiero pasar el mouse para reproducir/pausar el video.

Esta implementación a continuación solo reproduce el primer video al pasar el botón, pero no los demás.

No sé qué estoy haciendo mal y necesito tu ayuda como novato.

 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(); }); }); }