froogaloop events on hidden video vimeo

I am trying to catch pause and play events from one or more vimeo players i added dynamically with froogaloop.

The players are initially hidden, but still i want to attach the events to the player.

I made a js fiddle that illustrates my problem. when mydiv has style:display:none, the event ready does not fire.

http://jsfiddle.net/jonasvermeulen/c3dqU/2/

this is my html:

<div id="mydiv" style="display:none"></div>

this is my jquery

$('#mydiv').append('<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>');
var iframe = $('#player1')[0];
var player = $f(iframe);

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

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

function onPause(id) {
    alert('paused');
}

function onFinish(id) {
    alert('finished');
}

function onPlayProgress(data, id) {
    alert(data.seconds + 's played');
}

When you remove the display:none it works.

Is there a workaround for this?

Elements with display:none behave as if they were not even part of the DOM in many aspects.

(Simply try and use another method of hiding the elements – visibility, absolutely positioned off-screen, …)

… or, as you said, bind the events when the players aren’t hidden any more.