I’ve had the pleasure of working with YouTube’s javascript API. Using Flash’s ExternalInterface, it lets you control the YouTube player’s actions via javascript commands. We’ve been debugging this bizarre issue with Internet Explorer where the ExternalInterface is not always loaded.
After a few days of debugging, I figured out the problem. When the video is loaded, the embedded object must be attached to the DOM. Simply being attached to a DOM element is not enough. It must actually be attached to the document.
This problem comes up if you create a div element and then generate the element by setting its innerHTML property. Generally, you can just create the div, attach it to the DOM, and then set its innerHTML problem. The one time this does not work; however, is if you want to attach the div element within a p element.
For some reason, Internet Explorer decides to enforce the “block element within inline elements” only when setting innerHTML and not when using appendChild. So, as a pretty ugly workaround, you can first make a temporary div, attach it to the DOM, set its innerHTML, and then move the embedded element to the p element. There is another small caveat here. You have to wait until the ExternalInterface is loaded before you move it. YouTube provides a onYouTubePlayerReady callback which you can use for this.
Sigh, unfortunately this does not actually work all the time. It worked in my little prototype but failed when we tried to integrate it. Ugh.
Thanks very much for this useful Article. Really great Information to write about on my blog. I probably make a bookmark from another Website.
I wanted to thank you for this interesting I definitely loved every little bit of it. I have you bookmarked your web site to check out the latest stuff you post.
Great text and nice blog.