Wednesday, July 21, 2010

Correct Flash embedding with HTML

If you want to embed a Flash movie into a website, you can simply use the Flash built-in publisher code, however it generates a really big XHTML code, which has errors according to W3 validator, here's the screenshot (click to enlarge):


This doesn't satisfy all people. This method doesn't guarantee the correct display of the Flash in future for browsers that meet the standarts.

Here is the cross-browser HTML (Strict 4.01) code.

<object data="myflash.swf" 
style="height: 400px; width: 550px;"
type="application/x-shockwave-flash">
<param name="movie" value="myflash.swf">
<param name="wmode" value="opaque">
</object>

Let's check this with the validator (click to enlarge):



To use this code, you need to change "myflash.swf" to the path to your flash file, it can be relative or absolute, as well as height, width, and wmode.

There are 3 options for wmode:
opaque - The movie stays on top, hiding everything else behind it.
transparent - Stays on top, shows the background through the transparent portions, may slow down performance.
window - The movie is in it's own window on a webpage (stuff can get on top).

This works in all browsers, however there might be some bugs, for example, there might be some cursor problems in Google Chrome in opaque mode, but that's a browser bug, and it is the user's problem for using a faulty browser.

There are more optional param options, which you can use.

No comments:

Post a Comment