I got this annoying problem today: when trying to automatically populate a DIV with embed code from youtube, nothing happened on IE6. IE7 and FF work fine.

Some googling and I found this good resource about flash embedding techniques. There is one library that fixes the problem, called ufo.js, a library which was far too big for my taste (11k uncompressed). So after some trimming, I was a bit surprised to find out that all that was needed to make your innerHTML code work with Internet Explorer 6, was the missing CLASSID attribute for the object tag.

Here is a link to a test page that works well at FF, IE7, IE6, Opera, and Safari. There is one small reusable javascript function that fixes the embedded code by adding the CLASSID attribute to the object tag. After that, you can use innerHTML attribute to populate the contents of your HTML elements with embedded video code.

var fixEmbeddedVideo = function(embedCode) {
   if(embedCode && embedCode.toLowerCase().indexOf(’classid’) == -1) {
      var objPos = embedCode.toLowerCase().indexOf(’object ‘) + ‘object ‘.length;
      return embedCode.substr(0, objPos) + ‘classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000? ‘ + embedCode.substr(objPos);
   } else {
      return embedCode;
   }
}

Blogged with Flock

Tags: IE6, innerHTML, youtube, video, embed, dynamically