The original inkling of issues came via Anon’s comment, on my previous update post, that YouTube videos pulled down as part of the “more” section were broken. I tested this locally and saw that, with IE7, he/she was right. Of course, it’s not just YouTube. It would be any of the
<object>/<embed> elements video sharing sites provide.
That really sucks.
The Fix (sorta)
After spending one night trying to figure out what I could do to fix this, it became obvious that the generally accepted solution to dynamically adding those flash objects to a page is to use SWFObject, which:
swfobject.embedSWF method and be done with it. Best of all, swfobject.js is already distributed with the WordPress install (which, by the way, I don’t see mentioned in the codex, the script handle to use to enqueue or set is as a dependency is
'swfobject'). But I couldn’t seem to get it to work, at least not in IE7.
That really sucks.
What IE Doesn’t Like
You see, when it creates this new element for the DOM, it needs someplace to put it. You provide the id of the element which will be used as that replacement. Sort of like the sacrificial lamb for the the new
<object>. It’s through
outterHTML that the replacement occurs. It sets the old element to be the new one.
el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
createSWF function (line number as of version 2.2)
My plan was to replace the original object with the new one. When that didn’t work, I tried inserting a
<div> as the target for replacement, right before the object, but that failed in the same way. Finally, I realized what was going on, and set as the replacement an item that already existed in the DOM (in other words, it wasn’t something pulled in and added dynamically by the RMRH plugin). That worked.
The problem seems to be that, when the element to be replaced has also been dynamically created, IE throws an exception when you try to change it. In other words, I created the sacrificial lamb and IE wants for it to have always existed.
The Fix Again (sorta, again)
But it bugged me that the call to
outterHTML was the point-of-failure here. After all, I know I manipulate the DOM all the time in jQuery. Right? It provides
replaceWith as part of its API after all, and that always seems to work.
So I replaced SWFObject’s call to
outterHTML with jQuery’s
replaceWith (does that count as ironic?), and the problem was solved.
So What Do I Do?
This has to be a relatively common situation. I mean, pull down content using AJAX, content happens to contain an embedded flash player, use SWFObject to make sure it renders in IE. I guess what’s missing is that in the common scenarios, an existing element is already set aside and ready to accept the new object. But I can’t do that with my plugin.
So what do I do?