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!