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();
}
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).
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…