Streaming live at 10am (PST)

Getting background video to pause on hover

Read only link here

First time attempting to include any video element on Webflow. We have a few short mp4 background videos in a grid layout.

We come across a few posts asking the opposite i.e. how to get a background video to play on hover. We tried tweaking the codes and replacing ‘play’ with ‘pause’ and vice versa, and adding the code under Project Settings> Custom Code in the Footer Code section. But none of our videos reacted in any way when we hover over them…

Here’s the code we had tweaked (not coders here, so we are largely doing this via trial and error):

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {
$(‘video’, this).get(0).pause();
}

function hideVideo(e) {
$(‘video’, this).get(0).play();
}

Hope someone here can help :slight_smile: Thanks.

Use this script from @samliew:


It works great if you replace all play with pause and vice versa :slight_smile:

1 Like

Hello! We just tried it, but all the background videos are still playing when we hover over them… :thinking:

Hopefully it will help you
(function$(){
window.onload = function(){
$(“video”).each(function () { this.pause() });
}

$(function(){
	$("video").hover(function(){
		$(this).css("opacity","1");
		this.play();
	},function(){
		$(this).css("opacity","1");
		this.pause()
	});
});

})(jQuery);

  1. You did not replace the play/pause.
  2. Can you share a link to the live page?

Thanks for this. Just tried and it also didn’t work? We are sure we are doing something wrong on our end…

We went through similar posts for answers and want to clarify - are we suppose to be putting the code in the Page Settings > Custom Code, or in the Project Settings > Footer Code? At the moment, we only have this page that got background video, though we intend to have a background video on the homepage (but this video will autoplay in loop even when hover).

Here it is:
https://test-ep-website.webflow.io/testing-flexbox

Please excuse the ‘testing-flexbox’ confusion. We were experimenting with that before and then decided to recycle to the page to experiment with background videos…

Thanks!