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.