Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    HTML5 video play/pause on hover

    General Discussion
    3
    4
    1296
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      leednl last edited by

      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 :)

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • L
          leednl last edited by

          Thank you so much!

          1 Reply Last reply Reply Quote 0
          • M
            mactics last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post

            I don't answer or check forum DMs, please just post on the forum.

            Try this to fix issues before you post:

            Use the Search Feature. Maybe there is already a solution to your issue.

            1. Update Lay Theme and all Lay Theme Addons
            2. Disable all Plugins
            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
            4. Now see if your problem solved itself
            5. Go here, see if your problem is listed here:
            Troubleshooting

            When you post:
            1. Post a link to where the problem is
            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

            Thanks!

            Online Users

            I

            Recent Topics

            • M

              Tag filter / Maximum width

            • open all links in a thumbnail grid in a new tab

            • text underline

            • centred Carousel fixed width and proportions

            laytheme.com