Trouble with setTimeout on getElementById function

I am having trouble setting a delay on a getElementById function. The script uses an anchor tag to designate a YouTube player element. I can then call select videos to be played within the player element with a href tag. The goal is to delay the playing of selected videos by 1 sec. (1000ms) in order to allow time for a scrollToTop animation which is stored in an external file.

Here is the code:

The external scroll script:

    $('.video').click(function(){
        $('html, body').animate({scrollTop : 0},800);
    });

Code (markup):

The HTML with internal Javascript:

<div class="head"><a id="ytplayer" name="ytplayer"></a>
    <div id="ytplayer_div" style="background: #000">
    </div><!--End ytplayer_div-->
</div><!--End Head-->

<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/0x1vbsSiLKU&amp;autoplay=1&enablejsapi=1&rel=0&fs=1',
'ytplayer_div',
'511',
'294',
'8',
null,
null,
{
allowScriptAccess: 'always',
allowFullScreen: 'true'
},
{
id: 'ytplayer_object'
}
);
</script>

<div id="wdma1">

<script type="text/javascript">
function ytplayer_loadvideo( id ) {
var o = document.getElementById( 'ytplayer_object' );
if( o ) {
o.loadVideoById( id );
}
}
</script>

    <div class="left">
      <div class="left-sub">
        <div class="transbox"><a href="#ytplayer" onclick="ytplayer_loadvideo( 'UXuvPXR8sF4' );"><img alt="" class="video" src="images/avicii.jpg" /></a>
        </div><!--End Transbox-->
      </div><!--End Left-sub-->

      <div class="left-sub">
        <div class="transbox"><a href="#ytplayer" onclick="ytplayer_loadvideo( 'v8XnWUmxczs' );"><img alt="" class="video" src="images/skrillex.png" /></a>
        </div><!--End Transbox-->
      </div><!--End Left-sub-->
    </div><!--End Left-->
</div><!--End WDMA1-->

HTML:

I have tried several methods in an effort to achieve the desired effect to no avail. Any help you can offer would be greatly appreciated.

Thanks,

M.J.

 

First of all, your "#ytplayer" links are triggered before animation. Because img with "video" class is nested.

I would make it that way:
Remove this

$('.video').click(function(){
        $('html, body').animate({scrollTop : 0},800);
});

Code (markup):

then I would write custom function (for e.g startAnimationAndVideo(id))
then bind it to your "#ytplayer" links, like this

 "<a href="#ytplayer" onclick="startAnimationAndVideo( 'v8XnWUmxczs' )">....</a>"

HTML:

actual function code (not tested):

function startAnimationAndVideo(id)
{
    //navigate to element
    $('html, body').animate({scrollTop : 0},800);

    //wait for 1 sec and then play the video
    setTimeout(fuction () { ytplayer_loadvideo(id); }, 1000);
}

Code (markup):

That is NOT tested. But I think you got the idea.

 

Thanks Geofox! Your script worked with a slight modification to account for the 'o' variable. I had to change your function code to this:

<script type="text/javascript">
function startAnimationAndVideo(id)
{
var o = document.getElementById( 'ytplayer_object' );
if( o ) {
//navigate to element
$('html, body').animate({scrollTop : 0},800);
//wait for 1.2 sec and then play the video
setTimeout(function () { o.loadVideoById(id); }, 1200);
}
}
</script>

Code (markup):

Thanks for your help. It is much appreciated!

M.J.