Adding A Flash Object To A Web Page

Many of us have used the code that was provided by Adobe/Macromedia to include a Flash movie in a page:

Note: The object parameter <param name="wmode" value="opaque" /> and wmode="opaque" is necessary because a Flash movie normally appears above all other objects on a page. Setting wmode to opaque allows other objects to be seen through the Flash movie.

There are two major problems with using the standard code that was provided by Adobe/Macromedia :

The code will not validate because there is no such thing as an <embed> tag in HTML or XHTML.
Because of changes to IE resulting from the Eolas patent dispute, users will have to click on the Flash movie to activate it before interacting with it. You can read more about what Microsoft calls "ActiveX Control Activation" here.

You can eliminate the <embed> tag and use code similar to the following:

The above code will validate, but it still has the "ActiveX Control Activation" problem.

With the release of the 8.0.2 update (05/09/06) for Dreamweaver 8, Adobe/Dreamweaver fixed the "ActiveX Control Activation" problem by using JavaScript to include Flash content. Unfortunately, so that the Flash content will be available to those with JavaScript disabled, the old Adobe/Dreamweaver code, wrapped in <noscript> tags is still included, so the page will not validate. That problem can be solved by using the valid <object> code above between the <noscript> tags.

There is another solution -- a small JavaScript file called SWFObject (formerly known as FlashObject). SWFObject is used to include Flash content and detect the Flash plug-in in all major web browsers on both Mac and PC platforms. It is search engine friendly, degrades gracefully, validates as HTML and XHTML 1.0, and eliminates the "ActiveX Control Activation" problem. You can read more about SWFObject and download a copy here (it's free).

We have prepared a demonstration page, and the source code is well commented. You can view the page and the source code here.