Vimeo froogaloop API, working in Fiddle but not in WP

Question

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

Answer 1

Make sure you are working on a web server, it won't run locally due to JS security restrictions.

Answer 2

Have you set up the dollar sign to not conflict? Try using jQuery('.iframe...') instead of $