Change video on link hover

Question

I am trying to make this effect ( https://www.stornerprod.com/directors ) that change the video on link hover.

I went with GSAP, it should do the deal, but even though it changes the video URL, when I hover my link, the video itself does not refresh, what am I missing?

Thanks for any help provided!

HTML

     <video id="videoBG"  autoplay muted loop>
        <source src="./wp-content/uploads/2021/08/video.mp4" type="video/mp4">

 </video><div class="menu-home is-flex is-flex-column">
                       <div class="menu-home ">
                         <a data-src="/wp-content/uploads/2021/08/test.mp4" href="/commercial/">
            test</a>
                      </div>

my Gsap

$('.menu-home a').hover(function () {
   var value = $(this).attr('data-src');
   TweenMax.to('#videoBG source', 2, { attr: { src: value }, ease: Power1.easeOut, });
});

Answer 1

This is what you want.

var video = document.getElementById("video");

var links=  document.querySelectorAll("a.link")
links.forEach(a=>{
    a.addEventListener("mousemove",()=>{
    if(a.matches(':hover')){
        if(video.src != a.getAttribute("link")){
            video.src=a.getAttribute("link");
        }
        
    }
    })
})
document.addEventListener('mousemove', ()=>{

});

#container{
    display: flex;
    flex-direction: row
}
#video,.link{
    margin: 10px;
}
.link{
    font-size: 20px;
    text-decoration: none;
    background-color: silver;

    padding: 10px;
        width: calc(100% + 100px)
}
#link-container{
    display: flex;
    flex-direction: column;
}

<div id="container">


<video id="video" autoplay src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="350"></video>
    <div id="link-container">
        <a href="#" class="link" link="https://www.w3schools.com/html/mov_bbb.mp4">video no.1</a>
        <a href="#" class="link" link="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">video no.2</a>

    </div>
</div>

I made a code in which you can add <a> elements with an attribute link in which you can change the link of the video.

Hover over video no.1 and video no.2 to change the video

The videos are taken from w3schools and MDN