Why doesn't this jquery simple show function not work?

I have a simple problem... maybe i'm sleep deprived and not seeing what it is...

Basically, I have an image, click an image, show a youtube video. Simple right?

Here's my css...

<style type="text/css">

#movie { display: none; }

</style>

js...

$(document).ready(function(){

    $('#show_movie').click(function(){

            $(this).hide();
            $('#movie').show();


    });

});

and

<img id="show_movie" src="/img/开发者_Python百科site-inside.jpg" />          

<object id="movie" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/WDgm6YaApEY?hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WDgm6YaApEY?hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Is there something about showing a flash object i don't know about? Because the above code hides the image and does nothing else.

Try to move the movie id out of your css and add $('#movie').hide(); above the function that is supposed to let it apear.