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