Play Webflow Background Video on Hover

Simple code snippet that allows you to play/pause Webflow's background video on hover.

Code

There are two versions of the code depending on your needs.

NOTE: By default we are using Webflow's default class for background videos (.w-background-video), this will apply the hover effect to all background videos on the page, if you want to be more specific you can change the class within the query selector.

Option 1 - Reccomended

Option 1 controls the video element itself, meaning you can disable the play/pause button in Webflow. If you do enable to play/pause button this option will not update the play/pause button.

If you would like the play/pause button to be visable and update based on if the video is playing/paused on hover then use Option 2

<script>

const videos = document.querySelectorAll('.w-background-video');

videos.forEach((video) => {
  const wfBackgroundVideo = video.querySelector('video');
  let wasPlayingOnEnter = false;

  if (wfBackgroundVideo) {
    video.addEventListener('mouseenter', () => {
      wasPlayingOnEnter = !wfBackgroundVideo.paused;
      wasPlayingOnEnter ? wfBackgroundVideo.pause() : wfBackgroundVideo.play();
    });

    video.addEventListener('mouseleave', () => {
      wasPlayingOnEnter ? wfBackgroundVideo.play() : wfBackgroundVideo.pause();
    });
  }
});

</script>

Option 2

Option 2 controls the play/pause button within the background video. If you choose to disable to play/pause button this code will not work. 

<script>

const backgroundVideos = document.querySelectorAll('.w-background-video');
backgroundVideos.forEach((video) => {
    const wfBackgroundVideo = video.querySelector('video');
    const wfBgVideoBtn = video.querySelector('button');

    video.addEventListener("mouseenter", () => {
        wfBgVideoBtn.click()
    })

    video.addEventListener("mouseleave", () => {
        wfBgVideoBtn.click()
    })

});

</script>