Image hover addon with video possible?

[Verena]

I’d like to insert a video instead of image as hover. Is this possible? Gifs are juste too low in quality.

[arminunruh]

ahh no its not possible :O
but a good idea, i will write it down

[Verena]

Would be nice to have in the future. Tanks a lot! :)

[melo_lenosier]

I am also very interested in this. Video-hover would be great.
Thank you!

[melo_lenosier]

If anybody needs it, here is the script I used.
It was tricky because there was an annoying phenomena between the hover and the scroll functions. Basically while scrolling the page, the browser (Chrome especially) doesn't send any other mouse coordinates, therefore the hovered video was constantly there till the scroll was stopped.

Here is a script that avoid this problem:

<script>
let hoveredElement;
let mouseX = 0, mouseY = 0;

document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('mousemove', event => {
    mouseX = event.clientX;
    mouseY = event.clientY;

    hover(event.target);
  });

  document.addEventListener('scroll', () => {
    const hoverTarget = document.elementFromPoint(mouseX, mouseY);
    if (hoverTarget) {
      hover(hoverTarget);
    }
  });
});

function hover(targetElement) {
  // If the target and stored element are the same, return early
  // because setting it again is unnecessary.
  if (hoveredElement === targetElement) {
    return;
  }
// On first run, `hoveredElement` is undefined.
  if (hoveredElement) {
    if (hoveredElement.hasAttribute("data-videoid")) {
document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.remove('hoverscrolled');
     console.log(hoveredElement.getAttribute("data-videoid"));
     console.log(document.getElementById(hoveredElement.getAttribute("data-videoid")));

}

  }

  hoveredElement = targetElement;
if (hoveredElement.hasAttribute("data-videoid")) {
document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.add('hoverscrolled');
      console.log(hoveredElement.getAttribute("data-videoid"));
     console.log(document.getElementById(hoveredElement.getAttribute("data-videoid")));
}

}
</script>

HTML:

<div data-videoid="one_data"  >
</div>

<video id="one_data" class="vid_background" autoplay muted loop>
  <source src="https://somevideo.mp4" type="video/mp4">  Your browser does not support HTML5 video.
</video>

CSS:

video.vid_background{
     opacity: 0;
     left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -5;
    width: 40%;
    position: fixed;
    height: 50%;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
 }
 
video.vid_background.hoverscrolled  {
    opacity: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -5;
    width: 40%;
    position: fixed;
    height: 50%; 
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
 }