Why doesn't this clone work with ie but it does with firefox?

Question

I have a vimeo flash object hidden like so

CSS:

#banner-vid-link div.object, #mainVideo, #blackSheet {
    display: none;
}

HTML:

<div id="banner-vid-link">
   <img src="thumbnail.png" /><br />Watch This!
   <div class="object">
           <object width="700" height="394"><youget the idea /></object>
   </div>
</div>

And when you click the thumbnail, up pops the video using jQuery:

        $('#banner-vid-link').click(function(){
      newVideo = $(this).children().children('object');
      $('#blackSheet').fadeIn('slow', function(){
       $('#mainVideo').html(newVideo); // put the video in the box
       $('#mainVideo').fadeIn().children().fadeIn(); // fadein the 
mainVideo box, and fadeIn the object inside mainVideo
      });
    });

blackSheet is a full screen overlay and the #mainVideo sits nicely in the middle with the following css

Now the above code - all works fine in firefox and safari. But in ie7 on xp(haven't tried any other windows setups yet) but its faulty for some reason. It appears mainVideo isn't being populated with the newVideo variable - it merely loads the screen overlay and thats it.

Originally I was using jquery's clone() on the following line:

newVideo = $(this).children().children('object').clone(true);

But I read somewhere ie might not like clone very much or it handles differently to ff and safari. With or without the clone, it still works in ff but not ie.

What is the failing in my logic here?

Answer 1

It looks like you're taking a DOM element (newVideo) and using it to set the HTML on another element (mainVideo) without actually referring to its HTML.

I think the append() function may work better considering what you're trying to accomplish.

Try the following:

newVideo = $(this).children().children('object').clone(true);
$("#mainVideo").empty().append(newVideo);