Stop flash video when hidden

user576277 picture user576277 · Jan 14, 2011 · Viewed 8k times · Source

I know this question has been asked twice on Stack....but I still need help. I have 2 divs each containing SWFObjects. Here's the jquery that shows/hides my Divs:

$(document).ready(function(){ 
 $("#DIV2").hide();

  $('#button1').bind('click', function() {
    $("#DIV1").hide();
    $("#DIV2").show();
  });

  $('#button2').bind('click', function() {
    $("#DIV1").show();
    $("#DIV2").hide();
});
});

But I need my video in DIV2 to STOP PLAYING when it's hidden, and start from the beginning when you show it again. From what I read, I need to remove it from the DOM...but I don't understand how to re-add it. I've seen suggestions for detach(); but can't figure out where my AppendTo() would go.

Can anyone help?? I'd really appreciate it. BTW, here is a related post (which contains a link to ANOTHER related post).

Thank you in advance!

Answer

user576277 picture user576277 · Jan 20, 2011

Thanks for your help Ben. Before I saw your most recent response, I ended up using what I had seen in an answer to a similar post but adjusted it like so:

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

This worked perfectly for me. I gave my swfobject an ID "video", which sat within the div "video-holder". Hope this helps others!