Play Vimeo video on Hover from a CMS collection

Design help Custom code
1

I am trying to get a Vimeo video added to a CMS collection to auto play on Hover and and start from the beginning again on Mouse out.

I got it to work correctly, but only after I click the Vimeo play button will the mouse over target work correctly:

Project Share Link: https://preview.webflow.com/preview/emota?utm_source=emota&preview=cebc7273a4bf4855bc63dabe42e5ebde
Publish Link: https://emota.webflow.io/test

Any suggestions on how to correct the problem I am having?

Here is the code I am using in my prototype:

HTML Embed

<div class="wrapper">
  <div class="card">
     <iframe class="product-card-media" id="player1" type="text/html" src="https://player.vimeo.com/video/262057767?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
  </div>
</div>

CSS Styles

<style>
    #wrapper {
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      padding-top: 50px;
    }

    #wrapper .card {
      width: 25%;
      float: left;
      box-sizing: border-box;
    }
</style>

Java Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

<script>
    $('.product-card-media').each(function() {
      var player = $("#" + this.id);
      froogaloop = $f(player[0].id);

      player.mouseover(function() {
          froogaloop.api('play');
      }).mouseout(function() {
          froogaloop.api('pause');
      });
    });
</script>
2

try setting your HTML embed to autoplay, then pause it in the javascript

HTML

<div class="wrapper">
  <div class="card">
     <iframe class="product-card-media" id="player1" type="text/html" src="https://player.vimeo.com/video/262057767?title=0&byline=0&portrait=0&autoplay=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
  </div>
</div>

Javscript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

<script>
    
    $('.product-card-media').each(function() {
      var player = $("#" + this.id);
      froogaloop = $f(player[0].id);

       froogaloop.api('pause');

      player.mouseover(function() {
          froogaloop.api('play');
      }).mouseout(function() {
          froogaloop.api('pause');
      });
    });
</script>
4

Hey! Trying to make this work… has the code been updated? Thank you!

5

hey @stephanieberbec
what is not working for you? Did you get any error?

6

Is there also a way to preload the videos without pausing them via autoplay? If I have a large number of videos, this will slow down the page load.