Background video play on hover

Hello, I have a background video that plays ion hover, now that is exactly what I want, but is there any way I could make the video restart when I hover out?

that is when I hover in, it plays background then, on hover out, it pauses the video and jumps back to the first frame (restart)

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    var figure = $(".video").hover(function() {  
        $('video', this).get(0).play(); 
    }, function() {
        $('video', this).get(0).pause();
    }).each(function() {
        $('video', this).get(0).pause();
    });
});
</script>


here is the code I am using and the background video with a class name of .video

Hi @Mario1 ,

You just need to set the video back to the beginning.
Add this line under the 6th line of code (the line pausing video when hovered out)

 $('video', this).get(0).currentTime = 0;

BTW, I don’t know if you using/referencing this code in other ways as well.
If it is meant only for this purpose, the webflow frame is not required
if you locate it correctly (after body tag section).
and the declaration of “figure” is also redundant (you declare it but don’t use it).
You can clean it up like so:

<script>
$(".video").hover(function() {
	$('video', this).get(0).play();
}, function() {
	$('video', this).get(0).pause();
	$('video', this).get(0).currentTime = 0;
}).each(function() {
	$('video', this).get(0).pause();
});
</script>

Put it “after body tag”.

Thanks a lot, but this doesn’t take it back to the beginning of the video when hovered out, rather it takes it to the beginning when you hover on it again

here is the preview link
https://preview.webflow.com/preview/scl-test-v2?utm_medium=preview_link&utm_source=designer&utm_content=scl-test-v2&preview=77d66c50808053ac7c7c82a89f807010&pageId=60ef53678198df63e021c120&workflow=preview

thanks a lot.

Hi @Mario1 ,

The code won’t work in preview mode, please add a live link so I could check it out.
From what I see in your preview link, you’re referring to the 3 videos in section 26 right?

hello, yes the one on section 26. I didn’t start the website so the classes are off.
https://scl-test-v2.webflow.io/education

for referenece purpose this is what i am trying to achieve
https://scl-test-v2.webflow.io/filmmaking

Thanks @Mario1 ,

I can now see what you mean.
at least on my end, the play-pause to 1st frame runs as intended,
but some of the times it gets stuck - the video doesn’t return to 1st frame.
if you scroll down a bit when stuck, it will jump to 1st frame as intended.
Unfortunately, it seems like something is conflicting/interrupting.

When pasting the same code you use on your page in a blank project works just fine.
Take a look at this live demo to test on your side:
live demo

It could be resolved, but you will need to figure out what is conflicting on that page with some testing. I have added the same functions of code but instead of jQuery, this is with pure Javascript. Paste it instead of the jQuery one and see if there is a difference.
If the same thing occurs, Maybe duplicate the project and start eliminating custom codes, objects, animations to see where the problem lies.

Vanilla JS solution for testing:

<script> 
const vid = document.querySelectorAll('.video');
 vid.forEach(element => {
  	element.getElementsByTagName('video')[0].pause();
  	element.addEventListener("mouseover", hoverIN, false);
  	element.addEventListener("mouseout", hoverOUT, false);

	function hoverIN() {
		element.getElementsByTagName('video')[0].play();
	}

	function hoverOUT() {
		element.getElementsByTagName('video')[0].pause();
		element.getElementsByTagName('video')[0].currentTime = 0;
	}
});
</script>
2 Likes

This is working brilliantly in my own project, however, I don’t understand the restart/pause time. Is that in milliseconds? How could I get the file to pause at a different frame besides the first frame?

Thanks!

Anybody know how to get the video to reverse on hover out?

Can somebody please help me with my version? I’m trying to implement every code suggested but my background video just does nog want to play. Am I missing something?

Here is the link to the test page:
https://preview.webflow.com/preview/andonni-xyz?utm_medium=preview_link&utm_source=designer&utm_content=andonni-xyz&preview=6768e93200918f6bb59643c25b2dda46&pageId=638cec289a161842b3b83266&workflow=preview