Hover over video to start and to stop

Design help Custom code
1

I trying to get my video to start and to stop when you hover over the background video. I did find one thread about how to accomplish this but it doesn’t seem to work for my site. I’m a complete novice at java script, but i did place the suggested code in the page custom code area and changed the video source name but it’s not working. Please advise on what I’m doing wrong.

Thank you.

the Link is https://preview.webflow.com/preview/teds-hover-over-play?preview=cde1b65ff09f73be814e0e250d8213f0

P.S. Is there a way to apply this stop/play to video linked to my vimeo account?

2

Hi @ted,

Can you try the following :

<script>
var figure = $(".vid1").hover( hideVideo, hoverVideo );
function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }
</script>

Hope this helps

3

Sorry @ted, didn’t see your post scriptum.

You can put a div (initially display : none) with a button to your vimeo account inside your background video element. Then create an interaction when you hover over your video element display your div with the button inside and when you hover out display none.

Hope this helps

4

Hi Blaise, thanks for the response. I tried the script and the result was if you hover over the clip it stopped playing rather than start to play. I must apologize in advance that I am out of my depth in these areas. If you have any other insight to how to change this to play on hover I’d really appreciate it.

Thanks

5

Hi @ted

Try to switch hoverVideo, hideVideo, like this :

<script>
var figure = $(".vid1").hover( hoverVideo, hideVideo);
function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }
</script>
2 Likes
6

Wow, that solved it. It works perfectly. This has opened up a whole new area for me. I’ve been trying to solve this for several days. Today I purchased a book on JavaScript for kids that I think is the level I need, even though I’m an adult. I really appreciate your taking time out to help. I’m going to try your suggestion on handling my Vimeo video a little later but this hover over was much more urgent.

Thank you Blaise
Sincerely Ted

3 Likes
7

Yow, I spoke too soon. I didn’t realize that there is no audio playing on any browsers from the video, with/or with out java script connected to it. i’m not sure why. Have you seen this before. Maybe you can advise again.

8

Hello @Blaise_Posmyouck
Can you please help me with this?
I have used your code above to stop a video on hover and then play again on hover and this works. But is there something I can add to stop the video from auto-playing when the page loads? Thanks

9

Hi Guys,

I have buyed a template which I’m trying to fit to my needs. Here is the problem: there was a div block called “parallax image” but I wanted to show a video there. But when I removed the image and uploaded the video it is not clickable. I suppose that the block remove this functionality, but I don’t know how to fix it.

Here is my site Read-Only: Webflow - DigitalFriends Landing Page

The video is below “COME FUNZIONA”.

Thank you,
Christian