Load swfobject into facebox and an IE bug

I recently had some issues trying to load a swf via swfobject into a facebox. Swfobject 2.2 gives me some additional functionality including the ability to remove the swf completely when my facebox is closed. This was a problem for me in IE because audio from my swf continued to play after closing the facebox. The main problem is that facebox makes a duplicate of the content loaded on the page and places it inside its modal. At this point we have two IDs of the same name and can no longer control an element or object by ID. So I decided to add the new div with the initial facebox call and then use this new div for the swfobject. Here’s a quick example of code (sorry it’s so narrow and difficult to read):

Make sure you are loading jQuery, facebox and swobject 2.2

$(document).bind('reveal.facebox', function() {
swfobject.embedSWF("yourfilename.swf", "yourDiv", "400", "300", "8","expressInstall.swf");
});
$(document).bind("close.facebox", function(){
// Otherwise audio keeps playing in IE
swfobject.removeSWF("yourDiv");
}) ;

jQuery.facebox('

');

In addition, if you want to keep the facebox centered when the browser is resized, try this!


$(window).resize(function(){
var pWidth = $(document).width();
$("#facebox").css("left",pWidth / 2 - ($("#facebox table").width() / 2));
});

References:
http://jquery.com/
http://defunkt.github.com/facebox/
http://github.com/defunkt/facebox/blob/master/facebox.js
http://code.google.com/p/swfobject/wiki/api
http://code.google.com/p/swfobject/wiki/documentation