How to embed flash properly

[ryy705]

Hello,

I am trying to learn how to embed properly.
The following code works. But it does not pass W3C validation as XHTML 1.1. What am I doing wrong?

<object width="631" height="324">
  <param name="movie" value="files/flash.swf">
  <param name="wmode" value="transparent" />
  <embed src="files/flash.swf" width="631" height="324"       wmode="transparent">
 </embed>
</object

[JasonHippy]

You could try swfobject.js.
This is a free and quite small javascript library (google it, you'll find it!) which can be used for embedding flash onto any web-page.

It's cross-platform and cross-browser compatible. It can dynamically determine the browser and version of the browser that viewers of your site are using and can also detect the version of flashplayer installed on their browser. It then dynamically creates object/embed tags that will work for that particular browser.

That way, no matter what browser the users of your site are using, as long as they have the correct version of the flashplayer plugin, they will always be able to view your flash files!

It just takes a few lines of javascript, but you can embed your flash files easily and cleanly. The script will generate appropriate tags to embed the flash on the fly. So if a user is viewing your site with firefox, the script will generate the appropriate object/embed tags for firefox. Likewise for IE, Opera or any of the other major browsers.

As I've said, google it, download it and use it in your web-pages. There's plenty of documentation online to tell you how to use the script.

Cheers for now,
Jas.

[ryy705]

Thank you for your reply. I am now using swfobject.js. The page now passes W3C validation.

However, few other things are not working now. One of them is wmode.
When I hover over my drop down navigation it drops down behind the flash. What am I doing wrong? Please see my code below:

<script type="text/javascript">
  var params = {
                    wmode: "transparent"
                };

  swfobject.embedSWF("files/flash.swf", "rightCol", "631", "324", "9.0.0");
</script>

[digital29]

I tried validating it, and W3 says the following thing:
"The document type could not be determined, because the document had no correct DOCTYPE declaration. The document does not look like HTML, therefore automatic fallback could not be performed, and the document was only checked against basic markup syntax."
Tried declaring DOCTYPE at the top of the file?

[ryy705]

Thank you for your post.

What I am trying to figure out is why wmode: "transparent" is not working.

Yes I did declare a doctype. But I did not post all my HTML here. I think the problem is in the javascript.

[ryy705]

Okay I figured out the wmode problem. I need to pass the params var like so:

<script type="text/javascript">
  var params = {
                    wmode: "transparent"
                };

  swfobject.embedSWF("files/flash.swf", "rightCol", "631", "324", "9.0.0",false,false,params);
</script>

Now the next problem with swfobject is that it is screwing up the CSS.
I placed the flash inside a div called rightCol and this div has left padding of 10px. It worked fine when I was using html embedding. But now that I'm using swfobject the padding has disappeared.
Has anyone else had this problem before?

[ryy705]

Okay, figured out why it was not working.
swfobject was not placing the flash object inside the rightCol div.
Instead it was replacing righCol div with the flash object. That's why the CSS was messed up.

Its a very simple thing when you work with the generator. Just give the filename and parameters by selecting from well known drop down boxes.

Just have the attachment for swfobject, expressinstall and a utility to generate script for you. Copy and paste in your html page. Thats it! COOL!