Add a class to a div when a vimeo embed is playing

Question

I want to add a class to a div when a vimeo embed is playing. I found some info on Vimeo API. This is the fiddle i ended up with. It works on the left video, when you play it the tester div turns red, when you pause it it turns yellow. How could i change the code so that it would work for both video's? Or to be more specific, on any number of vimeo embeds?

Just for completeness, heres the code im using:

HTML:

<iframe id="player1" 
    src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"
    width="400" height="225" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<iframe id="player2"
    src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"
    width="400" height="225" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<p>Video status: <span class="status">...</span></p>
<div id="tester"></div>

CSS:

#tester{
  background-color:yellow;
  width:100px;
  height:100px;
}

#tester.playing{
  background-color:red;
}

JS/jQuery:

var iframe = $('#player1')[0],
    player = $f(iframe),
    status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    $('#tester').removeClass('playing');
}

function onFinish(id) {
    $('#tester').removeClass('playing');
}

function onPlayProgress(data, id) {
    $('#tester').addClass('playing');
}

Update:

Im adding the vimeo's dynamically to an empty iframe. This is where the problem arises of the solution not working anymore. To clarify things ive putted 2 fiddles together.

This fiddle works. When you play the video the yellow tester div turns red.

This fiddle doesnt work. First click the green "video 1" button, then the player shows. But when you press play on it the yellow tester div doesnt turn red.

I cant figure out what the problem is. When i inspect element, both iframes look exactly the same when they are rendered. Whats the difference and why doenst it work when i load the src dynamically?

Answer 1

You can add a class to all of the player iframes so in the code you just need to check if the player has the class or not and change whatever you want to.

Also it looks like you have to define the players in js as well and bind the event each time. There might be better ways to do this but I just looked at the code and came up with this

http://jsfiddle.net/HfwWY/2558/

<iframe id="player1" class="change" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe id="player2" class="change" src="http://player.vimeo.com/video/27855375?api=1&player_id=player2" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

JS

var iframe = $('.change');

iframe.each( function() {
    var player = $f( $(this)[0] );
    // When the player is ready, add listeners for pause, finish, and playProgress
    player.addEvent('ready', function() {
        status.text('ready');

        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
        player.addEvent('playProgress', onPlayProgress);
    });

} );

var status = $('.status');

Feel free to change the class change to something more meaningful like videoPlayer or whatever, just make sure the change is applied in js as well