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.

  • James Morris
    • WordPress Enthusiast

    Hello Lark Ismail

    I hope you are well today.

    I'm afraid I wasn't able to get this to work without some JavaScript, but here's what I was able to get to work on my own test site.

    JavaScript (loaded from wp_footer):

    var viewport = document.getElementsByClassName('viewport')[0]
    var video = document.getElementById('video')
    viewport.addEventListener('mouseover', function() { }, false);
    viewport.addEventListener('mouseout', function() { video.pause() }, false);


    <div class="viewport">
          <video id="video" loop>
            <source src="" type="video/webm">
            Your browser does not support HTML5 video.

    Let us know you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.