Play Video on Hover

Pro Tips Other Tips
1

To make video play on hover, you can use this code to Website Tools > Code Injection > Footer.
Note: The code applies for Uploaded Video Only (Video Block).

<script>
  window.addEventListener("load", (event) => {
const videosWrapper = document.querySelectorAll(".plyr__video-wrapper");
videosWrapper.forEach((wrapper) => {
  const videoBackground = wrapper.querySelector(".plyr__poster");
  videoBackground.addEventListener("mouseenter", () => {
    const video = wrapper.querySelector("video");
    video.muted = true;
    video.play();
  });
  videoBackground.addEventListener("mouseleave", () => {
    const video = wrapper.querySelector("video");
    video.muted = true;
    video.pause();
  });
});
  });
</script>

image
image800×620 39.5 KB

1 Like
2

Update: If the code doesn’t work, you can use this new code.

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