title: Vimeo Froogaloop API mouseover play/unload
body: <p>I have an embedded Vimeo video using mouseover play and unload to start and reset on hover.</p>
  <p>I have it working visually but I'm getting console errors:</p>
  <blockquote>
  <p>Uncaught TypeError:... (reading 'ready')(reading 'play') (reading
  'unload')</p>
  </blockquote>
  <p>If I run it incognito, the video only starts on click and then the mouseover functions work.</p>
  <p>Thanks!</p>
  <p><a href="https://codepen.io/scufco/pen/eYEpYaK" rel="nofollow noreferrer"><strong>View Codepen</strong></a><br></p>
  <p>Here's the HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html 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="550px" height="550px" frameborder="0" src="https://player.vimeo.com/video/631577098?api=1&amp;controls=0&amp;amp;player_id=player1"&gt;&lt;/iframe&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;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's the Javascript:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.product-card-media').each(function() {
    var player = $("#" + this.id);
    froogaloop = $f(player[0].id);
  
    player.mouseover(function() {
      froogaloop.api('play');
    }).mouseout(function() {
      froogaloop.api('unload');
    });
  });</code></pre>
  </div>
  </div>
  </p>