I’m trying to harness Vimeo’s Froogaloop API to pause video embeds whenever a user clicks a certain element. I have it working perfectly in my Fiddle but it wont work in my WordPress environment.
I took some code from this thread to create a simplified version of the site I’m working on;
HTML
<div id="player1" class="col">
<div class="vid">
<iframe src="//player.vimeo.com/video/75817361?title=0&byline=0&portrait=0&api=1" width="100%" height="auto" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div id="player2" class="col">
<div class="vid">
<iframe src="//player.vimeo.com/video/7038107?title=0&byline=0&portrait=0&api=1" width="100%" height="auto" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<a class="pause" onclick="pauseAll(); return false;" href="#">Pause</a>
jQuery
function pauseAll() {
$('iframe[src*="vimeo.com"]').each(function () {
$f(this).api('pause');
});
}
As I say, it works perfectly in my Fiddle but not in my WP based site It also seems to just be Google Chrome where it doesn’t work in WP which is making me scratch my head even more.
If anyone has any ideas it would be a great help.
From: https://developer.vimeo.com/player/js-api#universal-event-spec
You may need to add the player_id query parameter to the src definition.