HTML5 video play/pause on hover

leednl

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

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

Thank you so much!

mactics

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

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