Why doesn't this jquery code work?

I have this code in my application.js file, but it doesn't seem to work:

$("#video_div img").click(function() {
   $("div.embed").toggle();
});

Here's the HTML my browser sees:

<div id="video_div">
<img src="http://i3.ytimg.com/vi/fTWpHknumdg/hqdefault.jpg" style="width: 200px; ">
<div class="embed">
<object width="300" height="194"><param name="wmode" value="opaque"><param name="movie" value="http://www.youtube.com/v/fTWpHknumdg?version=3">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/fTWpHknumdg?version=3" type="application/x-shockwave-flash" width="300" height="194" allowscrip开发者_JAVA技巧taccess="always" allowfullscreen="true" wmode="opaque">
</object>
</div>
</div>

Right now, I am hiding the div.embed element with div.embed { display: none;} but the click method isn't making the element reappear again...

Is your code getting called? Do you need to do this?

$(document).ready(function () {
    $("#video_div img").click(function() {
        $("div.embed").toggle();
    });
});

It's working for me. Are you sure you have jQuery loaded. Make sure your jquery.js is placed just before the closing body tag </body>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>

Check working example at http://jsfiddle.net/Ey4YC/

You can also try your code like this if your want to keep your jquery.js in the header.

$(function() {
    $("#video_div img").click(function() {
        $("div.embed").toggle();
    });

my guess is Flash error. try the same code but this time when u click the image then resize browser.

recently my firefox and chrome oftenly not render youtube's vdo(the vdo just white like nothing load) but after i resize browser's window its appear.