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>