Vimeo Froogaloop API, working in Fiddle but not WP

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=0amp;byline=0amp;portrait=0api=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=0amp;byline=0amp;portrait=0api=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.

Topic vimeo jquery api Wordpress

Category Web


From: https://developer.vimeo.com/player/js-api#universal-event-spec

If you’re embedding and controlling multiple players on a page or using our JS API library (Froogaloop), you should give each player a player_id that matches the id of the iframe element.

http://player.vimeo.com/video/VIDEO_ID?api=1&player_id=vimeoplayer

You may need to add the player_id query parameter to the src definition.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.