Background Video Play/Pause on Hover

[Brad_B_1]

Hi,

I am trying to write some JS that will allow background video to only play when it is being hovered over. I have it working with regular video, but I can’t make it work with background video, which is important for what I’m trying to do. First I am trying to pause the video, which works. Then I am trying to make it start again on hover and stop when the hover leaves. These last parts aren’t working. Any idea what’s going wrong? Any advice would be greatly appreciated. Thanks so much!

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

[ruenel]

Hello @Brad_B_1,

Thanks for posting in!

One thing I do noticed is that your code is incorrect syntax. It will just generate a JS error. It should start like this:

(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);

The code above does not guarantee that it will work. I am only correcting the syntax in your code.

[Brad_B_1]

Thank you. I’m having trouble, so I abandoned this way of doing it. I still need to figure out a way to make video play and stop when it is hovered over.

1. Do you have any suggestions on how to do this?

2. I found this article (http://www.themepunch.com.cach3.com/index.html@p=13488) and implemented it on the page in the secure form. However, it’s not working. Any idea what’s wrong?

Thanks so much!

[paul.r]

Hi,

I checked and there a lot of errors in the console. Those errors could be preventing the js script(for hover) that you added from working.

As my colleague have suggested please change the js code on that page with the one provided or remove it if you don’t need it any more.

After removing it, if the issue persist, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

[Brad_B_1]

Thanks for the reply. I got the hover effect working using the code below:

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

function hoverVideo(e) {  
$('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

THe code works on background videos, but they autoplay on load. Is there a way to disable this so that they only start playing on hover? I’ve tried using this code below, but neither is working for some reason:

var newSource = $("video").attr('src').replace("&autoplay=1", "&autoplay=0");

and

document.getElementsByTagName('video')[0].removeAttribute('autoplay');

Thanks so much!

[ruenel]

Hello @Brad_B_1,

You may need to add this:

window.onload = function(){
  $("video").attr('src').replace("&autoplay=1", "&autoplay=0");
} 

Hope this works out for you.