How to play a HTML element when you hover over a different element

Hello, I’m trying to apply this background glow effect on some portfolio videos when you hover over them (Creating custom 2D & 3D interactions — Build a custom portfolio in Webflow, Day 13 - YouTube the same effect as 19:22 of this video). The portfolio videos are sourced using a HTML embed as the quality is far better than Webflow background video and it gives me the play-pause on hover functionality I desire using JS in the before body tag. This works so far but what’s stumping me is how I can have the glowing HTML embed element behind the one that’s play/pausing on hover ALSO play/pause when you hover over it (so the glow effects colours would keep up with the video playing on top of it).

Is there anyway to link an elements event listener to another one? Or is there a way for sibling elements to respond in the same way as other sibling elements? Any help would be much appreciated.

Here is the HTML code in the HTML embed:

And here is the Javascript code in the before body tag that allows me to play/pause on hover:


READY ONLY SITE BELOW

Looks like the play/pause hover functionality doesn’t work on a read only site. You can see it here: Work

Looks like the HTML and JS code didn’t copy so here’s a photo of it:

this is also the type of effect im looking for. Like how youtube does it to their videos but i can’t seem to find an answer.