Play vimeo videos on mouse hover

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?

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

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

<div id="wrapper">
    <div class="card">
        <iframe class="product-card-media" id="player1" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;player_id=player1"></iframe>
    </div>
    <div class="card">
        <iframe class="product-card-media" id="player2" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;player_id=player2"></iframe>
    </div>
    <div class="card">
        <iframe class="product-card-media" id="player3" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;player_id=player3"></iframe>
    </div>
    <div class="card">
        <iframe class="product-card-media" id="player4" type="text/html" width="100%" src="http://player.vimeo.com/video/126309467?api=1&amp;player_id=player4"></iframe>
    </div>
</div>
<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>
    $('.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>

The following code works perfectly for me

$('.product-card-vimeo-video').mouseover(function(){
var player = $("#" + this.id);
        froogaloop = $f(player[0].id);
        froogaloop.api('play');
        player.mouseout(function(){
            froogaloop.api('pause');
        });
});