Start video on hover

Design help Custom code
1

Hi everyone,

I’d like to make my videos start to play when you hover over the text. I managed with one video so far with this script in the footer:

<script>
    $(document).ready(function() {       
        $('.video').each(function(i, obj) {
            $(this).on("mouseover", function() { hoverVideo(i); });
            $(this).on("mouseout", function() { hideVideo(i); });
        });
});

        function hoverVideo(i) {  
                $('.thevideo')[i].play(); 
        }

        function hideVideo(i) {
                $('.thevideo')[i].currentTime = 0; 
                $('.thevideo')[i].pause(); 
        }
</script>

Putting the text in a div called »video« to start the script and the video in an html embed code like this:

<div class="video" >
    <HTML Embed>
    <video class="thevideo" position= "absolute" top= "0px" margin= "0 auto" height= "auto" width= "100%" preload="auto" muted loop>
		<source src="https://player.vimeo.com/external/521879644.hd.mp4?s=a4bd4e1abe4608d5c07d775d5dbb3b3d55b542ff&profile_id=175" type='video/mp4;' />
	</video>      
      </>
  </div>

BUT this only seems to work with one video. If I put more videos on the side, only the first will start on hover. I tried naming my script and div class »video1« »video2« and so on but it didn’t work.
Do you have any ideas how to fix that?

Here is my site Read-Only: https://monkeyberlin-preview-3a28-d94aa03c105a2.webflow.io/

BR,
Maria`

Preformatted text

`

2

You have many js errors due to the use of the same variable+functions twice, try debugging your code a little bit, would advise not using the same variable names and classes or adjust the code and write a function to do the same for both videos.

4

Hey so I tried to give the functions specific names, so the »neymar_start« function for example starts only the embedded video »neymar_video« so I can start each video by its own headline:

<script>
    $(document).ready(function() {       
        $('.neymar_start').each(function(i, obj) {
            $(this).on("mouseover", function() { hoverVideo(i); });
            $(this).on("mouseout", function() { hideVideo(i); });
        });
});

        function hoverVideo(i) {  
                $('.neymar_video')[i].play(); 
        }

        function hideVideo(i) {
                $('.neymar_video')[i].currentTime = 0; 
                $('.neymar_video')[i].pause(); 
        }
</script>

but this does not seem to work as well. I want each video to start by hovering on it’s own headline.
Sorry I don’t know javascript that well! Can anyone help?

Here is my page:
https://monkeyberlin-preview-3a28-d94aa03c105a2.webflow.io/