How to play a video on hover?

Design help General
7

If you have a video embedded just give it a class within the “embed” widget area and also give the div container holding the embed widget a class.

Structure like this:

  <div class="video" >
      <HTML Embed>
        <video class="thevideo" width="100%" height="auto" preload="auto" muted loop>
		<source src="VIDEO.MP4" type='video/mp4;' />
	</video>      
      </>
  </div>

The outer div needs a class, that you ll call within the javascript on the first event:

.video

And you ll need a class within the Embed code on the video itself:

<video class="thevideo" width...and so on />

then return to the dashboard and use this javascript code within the “Footer Code”:

<script>
    $(document).ready(function() {       
        $('.video').each(function(i, obj) {
            $(this).on("mouseover", function() { hoverVideo(i); });
            $(this).on("mouseout", function() { hideVideo(i); });
        });
});

        function hoverVideo(i) {  
                $('.thevideo')[i].play(); 
        }

        function hideVideo(i) {
                $('.thevideo')[i].currentTime = 0; 
                $('.thevideo')[i].pause(); 
        }
</script>

If you then hover over the div with the class “video” it will then run a function “hoverVideo” or “hideVideo” either if you mouseover the div or not.

Regards
Daniel

p.s. if you want the video just to pause and play it again with the next hover, remove the line $(‘thevideo’)[i].currentTime = 0; from the function “hideVideo”.

9 Likes