WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
1  
The jQuery included with WordPress is set to noConflict mode so the $ shortcut isn't available until you make it available. Double check that isn't the problem. – helgatheviking Jan 20 '14 at 19:53
    
@helgatheviking I use $ everywhere else and I don't have any problems. I've also tried replacing it with jQuery and the problem still persists – Poisontonomes Jan 20 '14 at 21:05

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.