Question

Here’s the HTML that my browser sees. I want to hide the div.embed element:

<div id="video_div">
<img src="http://i2.ytimg.com/vi/ERF9lCf86I8/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/ERF9lCf86I8?version=3">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/ERF9lCf86I8?version=3" type="application/x-shockwave-flash" width="300" height="194" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</object>
</div>
</div>

Here’s my application.js code to dynamically replace a link with its corresponding embedded video, display the thumbnail, and unsuccessfully hide the video:

$(document).ready(function() {

$('a.oembed').embedly({maxWidth:300,'method':'replace'}).bind('embedly-oembed', function(e, oembed){ 
    $("#video_div").prepend($("<img>", { src: oembed.thumbnail_url, width:200 }));
});
$('div.embed').hide();
});

It’s really weird that this hide method does not work. Any ideas why?

Answer 1

I expect the code above the hide call is failing and the call isn’t getting executed at all. If I put in a fake embedly plug-in, it works: http://jsbin.com/ucuru4/2

I recommend single-stepping through the code in a debugger. Chrome, Safari, Opera, and IE8 all have built-in debuggers. There’s Firebug for Firefox, and the free edition of VS.Net for debugging on previous versions of IE.

If the code is okay but you find that the embedly call is failing intermittently, may be best to wrap it in a try/catch block.