Play VImeo video on hover of parent and pause off hover

Asked May 13 '20 at 12:53

Active May 13 '20 at 13:17

Viewed 605 times

I have a list of bootstrap columns (3 per row) with each one having a Vimeo video inside.

How can I do it so that when you hover on each column, the video inside this column autoplay, and when you hover off, this video pauses?

I tried the below so far but it's crashing the iframe:

    $('.product-card-media').on('mouseover',function(){
      var player = $("#"+this.id);
          froogaloop = $f(player[0].id);

      player.mouseover(function(){
          froogaloop.api('play');
      }).mouseout(function(){
          froogaloop.api('pause');
      });
    });

edited May 13 '20 at 13:13

asked May 13 '20 at 12:53

robin geagea

Can you post your code, what have you tried till now? – Mara Black May 13 '20 at 12:56
@MaraBlack yes please check my question now. – robin geagea May 13 '20 at 12:59
https://stackoverflow.com/questions/35549780/play-vimeo-videos-on-mouse-hover Success! – Jeroen van Rensen May 13 '20 at 13:01
@JeroenvanRensen this works but only when I hover over the video, any idea how should change it so that it starts and pauses on hover of the parent bootstrap column? – robin geagea May 13 '20 at 13:14

Play VImeo video on hover of parent and pause off hover

0 Answers0