swfobject "t has no properties" error

Posted May 28th, 2008 in Javascript

I used swfobject 2.0 to insert a flash movie into a customer's website and it all worked nicely. I then moved the page it was on and it stopped working. This post looks at the error message I found ("t has no properties"), what I did wrong and what the solution was.

What is swfobject?

swfobject is a Javascript library which makes it really easy to embed Flash movies into a web page. It can be as simple as adding the Javascript file to your HTML head section and then adding the following code to the appropriate section on the page:

<div id="swf">
    <script type="text/javascript">
        swfobject.embedSWF("/flash/my.swf", "swf", "100", "100", "9.0.0");
    </script>
</div>

The change I made

I moved the code which the above example is based on into another file, changed the flash movie it was using and it ended up looking like e.g.:

<div class="flash">
    <script type="text/javascript">
        swfobject.embedSWF("/flash/my.v2.swf", "swf", "100", "100", "9.0.0");
    </script>
</div>

The errror

When I loaded the new page the flash movie failed to display. I tried viewing it in both Firefox and Internet Explorer, and in both instances it failed to display. I had a look at the Apache log file and the swfobject Javascript file was being downloaded but the flash movie wasn't.

I took a look at the Firefox error console and found the following error message:

t has no properties

The solution

The error message didn't really shed any light, but after comparing the old HTML and Javascript code with what was on the new page I realised that I'd changed the <div> tag from <div id="swf"> to <div class="flash"> and the embedSWF() function expects the div's ID as its second parameter.

So I changed the div's class to an id and changed the name in the second parameter. My code now looked similar to the following example. I have made the id and where it goes in the function call bold so you can easily see where they need to match.

<div id="flash">
    <script type="text/javascript">
        swfobject.embedSWF("/flash/my.v2.swf", "flash", "100", "100", "9.0.0");
    </script>
</div>

The flash movie was now able to play after the above change. So if you change the name of the containing <div> you also need to change the value passed to the embedSWF() function.