I have an embedded Vimeo video using mouseover play and unload to start and reset on hover.
I have it working visually but I'm getting console errors:
Uncaught TypeError:... (reading 'ready')(reading 'play') (reading 'unload')
If I run it incognito, the video only starts on click and then the mouseover functions work.
Thanks!
Here's the HTML:
<div id="wrapper">
<div class="card">
<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&controls=0&player_id=player1"></iframe>
</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>Here's the Javascript:
$('.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');
});
});