Dynamically embed Youtube videos on IE6 using innerHTML

2 min read >

Dynamically embed Youtube videos on IE6 using innerHTML

Engineering Insights & Web Platforms

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

Unlock innovation and digital transformation for your business.

Get in touch

We are always happy to talk

Phone

+40-21-223-7700

Email

hello@tremend.com

Address

165 Splaiul Unirii, Timpuri Noi Square,
TN Office 2 building, 4th floor,
District 3, Bucharest, Romania, 030134