HTML5 video play/pause on hover

leednl · wrote on Feb 16, 2017, 3:39 PM

Hi Armin,

I would like to play/pause HTML5 videos on hover instead of on click. I tried to go through the JS code to change it but I couldn't figure it out. How can I do that?

Thanks :)

arminunruh · wrote on Feb 16, 2017, 6:41 PM

Hey leednl!

You can use this custom JS in "lay options" -> "custom html/css" -> "Custom <head> content"

<script>
    window.laytheme.on("newpageshown", function(){
        jQuery('video').each(function(){
           this.pause(); 
        });
        jQuery('video').on('mouseenter', function(){
           this.play(); 
        });
        jQuery('video').on('mouseleave', function(){
           this.pause(); 
        });
    });
</script>

To make this work you need to check "autoplay" for all of your html5 videos in the gridder.

leednl · wrote on Feb 16, 2017, 7:37 PM

Thank you so much!

mactics · wrote on Mar 21, 2023, 9:56 PM

Trying the same, but it seems it doesnt work anymore. Should I do sth different?
I'm trying to use linked html5 videos in gridder.

arminunruh · wrote on Apr 2, 2023, 3:44 PM

try disabling autoplay for the videos

also make sure the videos are muted

Lay Theme Forum

HTML5 video play/pause on hover

Before you post:

When you post:

Online Users