Youtube embedded video activating too late to accept javascript call

Question

I have a YouTube video embedded in my page. It is hidden (display:none). You need to click one of the video link buttons to display the video and play it. The links are defined like this:

<a href="javascript:play('xxxxxxxxxxx')">Video 1</a>
<a href="javascript:play('xxxxxxxxxxx')">Video 2</a>

xxxxxxxxx represent YouTube video IDs.

Here's the play function:

function play(id)
{
    ytplayer.style.display = 'block';
    ytplayer.loadVideoById( id, 0, 'hd1080' );
}

It's fundamentally pretty simple! But here's the problem. since the video player is hidden, the flash object is not activated. So when I click a video link, the line ytplayer.style.display = 'block'; displays the video player, but it takes about about half a second for flash to load. During this time it cannot accept any method calls, such as the next line ytplayer.loadVideoById( id, 0, 'hd1080' );. Essentially, I have to click the link twice, once to load up the flash video player, the second time to actually load the video into the player.

Answer 1

It looks like once you enable the video, you need to setup and wait for a callback:

onYouTubePlayerReady(playerid)

(Taken from this page: http://code.google.com/apis/youtube/js_api_reference.html)

In that function you could then do any calls that require the player to be loaded:

ytplayer.loadVideoById( id, 0, 'hd1080' );

If you aren't using the chromeless player, you may need to instead listen for the onStateChange and onError events.