Video autoplay on hover + poster issues

Hello, I've tried a few code options I've found in forums but I can't figure out how to make my video poster disappear and video play on hover instead of on autoplay correctly and I'd really appreciate any advice. For reference I'm trying to create something with this kind of function:

The videos are in a css based slider here . 90% of the time all 3 videos play at the same time on autoplay. Occasionally when I load the page it only loads the posters - no video. Especially on my large monitor.

I tried to use a few js options I saw in overstack forums but I couldn't get any to work. So this is attempt two that tries to avoid js entirely. . If I've already clicked somewhere on the page on Chrome, this will work and play/pause on hover but there's no reason for someone to click before seeing the slider. It seems fine on Firefox and won't work at all on Edge. It is just blocked.
I'm wondering if there is a more straight forward way to do this that works on all 3 browsers. I think I keep using work-a-rounds.

I've enabled support access in my wpmudev dashboard if you'd like to take a look. I use Beaverbuilder theme + builder on the site but I don't believe BB is interfering with anything. I'm just doing something incorrectly.

Thank you so much for your thoughts.