title: Play vimeo videos on mouse hover
body: <p>I have four vimeo iframes in a page. I want to play the video on mouseover and pause the video on mouseout. The following code works, but only for the last video. How can I modify it so that it will work for all the videos?</p>
  
  <pre class="lang-css prettyprint-override"><code>#wrapper {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
  }
  
  #wrapper .card {
    width: 25%;
    float: left;
    box-sizing: border-box;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
      &lt;div class="card"&gt;
          &lt;iframe class="product-card-media" id="player1" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;amp;player_id=player1"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;iframe class="product-card-media" id="player2" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;amp;player_id=player2"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;iframe class="product-card-media" id="player3" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;amp;player_id=player3"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;iframe class="product-card-media" id="player4" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;amp;player_id=player4"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://f.vimeocdn.com/js/froogaloop2.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $('.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');
        });
      });
  &lt;/script&gt;
  </code></pre>