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