Apr 21 2009

Don't Use the DOM to Insert Flash

I didn’t have the priviledge of using SWFObject or the likes. I just needed to create a movie in a modal-like window that depended on the page you were on. So, taking a list of properties and params, I proceed to use the DOM methods to build my Object and Param tags. Well, Prototype ’s Element methods, actually. It worked in Firefox, and partially in Safari / Chrome, and none at all in Internet Explorer 7.

So then, a little research shows that all the Javascript solutions for inserting a video object doesn’t use Element at all. It would seem that extends the HTMLObjectElement cause problems. The solution: simply write the HTML into a string, and set the innerHTML of an Element to your object.

Here’s how Mootools handles it in its Swiff class :

var build = '<object id="' + id + '"';for (var property in properties) build += ' ' + property + '="' + properties[property] + '"';build += '>';
for (var param in params){    
	if (params[param]) 
		build += '<param name="' + param + '" value="' + params[param] + '" />';
}
build += '</object>';
  • #javascript
  • #flash
  • #bug