Flash video still playing on DIV that is removed using jQuery (IE bug)

Question

I have some jQuery tabs one of which holds a flash video. When I play the video in one tab and click to another in FF or Safari the video stops along with the sound, clicking back to the video tab reloads the content - as expected.

In Internet Explorer this is not the case, the video continues to play even when the tab is not selected. My understanding is that when display:none (jQuery hide()) is applied the DOM element is essentially removed from layout - why is this not happening with IE browsers, how can I fix it?

Answer 1

To remove the video and then re-add it, add the following to your function that closes the video window:

 // Remove and re-add video
 var clone = $("#video-holder").clone(true);
 $("#video-holder").remove();
 $("#video").html(clone);

Where you have a surrounding "video" div, and inside a "video-holder" div that houses the embed code.

Answer 2

You could try removing the element when you are tabbing away from the div containing the flash like $("object").remove();

Answer 3

Simply do like this to refresh :

var a = document.getElementById('div_movie').innerHTML;
document.getElementById('div_movie').innerHTML = a;

Answer 4

$("#VideoContainer").html("");

Seemed to be the right answer, but if I click the same element twice it stays empty.

Answer 5

simply clear the container of the video like this:

$("#VideoContainer").html("");