play video on hover

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
let checkCount = 0;

function initVideoHover() {
  $('.video-block').each(function() {
    let video = $(this).find('video')[0];
    let container = $(this);
    
    if(video && !container.data('hover-initialized')) {
      container.data('hover-initialized', true);
      
      container.mouseenter(function() {
        if(video) {
          video.currentTime = 0;
          video.play();
        }
      });

      container.mouseleave(function() {
        if(video) {
          video.pause(); 
          video.currentTime = 0;
        }
      });
    }
  });
  
  checkCount++;
  if(checkCount < 10) {
    setTimeout(initVideoHover, 1000);
  }
}

$(document).ready(function(){
  initVideoHover();
});
</script>

 

Buy me a coffee