Discuss: Flash Satay: Embedding Flash While Supporting Standards

by Drew McLellan

251 Don't forget about the EMBED element

The following CSS has worked for me using the XHTML 1.0 Transitional DOCTYPE, to display a flash file at 100% width and height (ie. it stretches to fit the full browser window) – note the inclusion of EMBED which is the Gecko (Mozilla/Firebird/Netscape…) bit:

body, OBJECT, EMBED { padding: 0; margin: 0; width: 100%; height: 100%; position: absolute;
}

posted at 04:01 am on January 13, 2004 by coda

252 Re: Don't forget about the embed element

Re: coda
Well, actually we are forgetting about the embed element, as it is not part of the XHTML
specification and will prevent your page from validating. Only the object tag/element is being used. See the W3C validator service: http://validator.w3.org

There is no need to use embed as a selector. Also, the {absolute: position} as part of
an object selector, kills the display in NS 6.0, 6.01, and 6.1….and height: 100%;
over-scales in NS 4.8 or less. See previous posts for more details on these issues:
http://www.alistapart.com/discuss/flashsatay/25/

I can understand if you say to hell with NS 4.8 or less, but NS 6.x is still fairly new and in use by many. Also if you don’t care about NS 4.8 or less, then I would expect that you would be detecting for those older browsers and posting a notice page with a browser upgrade link. The average user doesn’t know how or where to upgrade their browser unless we direct them.

posted at 04:38 pm on January 13, 2004 by RazorX

253 Ah

I only realised after my post that there were 25 previous pages of dicussion. ;) It’s good to know about those issues, thanks for that.

posted at 07:28 am on January 14, 2004 by coda

254 Good

Good

posted at 06:17 am on January 20, 2004 by QQ吧精彩

255 Good

Good

posted at 06:17 am on January 20, 2004 by QQBA

256 What about wmode properties

There is a point I do not see here. I try to use the Satay method but I have big trouble when trying to use .
First it doesnt work at all on Opera (but it seems Opera doesnt recognize this properties) and on Explorer and Mozilla, my animation have strange behavior. Do anyone know if using the transparent properties is compatible with the standards?
Thanks!

posted at 06:54 am on January 20, 2004 by Tanis

257 RE: Forgive my ignorance

Reason why web standards are important to me: – At my company we develop web applications for Wireless/Handheld devices. Adhearing to web standards is the only way a company can write a simple/efficient browser for these smaller devices. If the HTML doesn’t validate, most of the time it won’t even run.

- HTML Validation helps me debug my generated content with my php/perl pages. It will help tell me where/if i forgot to add a closing tag, or if my loops are bad.

I’ve been using a Javascript hack to get my Flash stuff to validate in the past. Taken from here:
http://www.davidsonbicycles.com/html/home.shtml

posted at 10:14 am on January 20, 2004 by j0rd

258 Flash Satay to Flash Javay

Re: jOrd Well, the author of davidsonbicycles.com is simply wrapping [removed] //<![CDATA[ around the embed tag. The embed tag is no longer a valid XHTML tag/element. The Flash Satay and many of the posts to it, have also confirmed that embed is no longer needed. Simply hiding it from the validator is not anything hair-raising, however, when the element is not needed, then it’s a waste of code.

In trying to be XHTML compliant, the main issues revolve around the fact, that anytime IE 6 or less encounters the data element, it will not stream a movie.swf. To add to the problems, using a container movie to fix streaming in IE can add new troubles in Flash (read previous posts), also you cannot detect minor Flash player versions using client-side VBScript for an IE browser, so now your codebase=”“ becomes important to catch minor Flash versions in IE. Minor Flash detection becomes vital when determining what ActionScript elements to use or not to use based on bugs within a particular minor version and/or player release. All of these issues have been thoroughly covered in previous posts though. So, all that being said, if I am being forced to use a JavaScript “hack and hide” with //<![CDATA[ to pass validation and to get IE to work right, then my personal choice is to feed IE what it wants. This allows me to maintain the ability to stream the larger .swf files, and still detect for minor Flash versions in the visiting IE browser if needed. My preferred and final solution, which I have dubbed Javay, is a simple block of code I have tested in many browsers:

[removed]
//<![CDATA[ /// Flash Javay method
var ua = navigator.userAgent.toLowerCase();
if ((ua.indexOf(“msie”) != -1) && (ua.indexOf(“opera”) -1) && (ua.indexOf("webtv") -1)){
[removed](’<object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,23,0” width=“500” height=“500”>’);
[removed](’ </object> ‘); }
else{ [removed](’<object data=“movie.swf” type=“application/x-shockwave-flash” width=“500” height=“500”></object>’); }
//]]>
[removed]

(Of course, now the future threat of Eolas/IE may force me to change how this code is delivered to the page.)

And when I need my Flash object to be 100% width and height, then I use this CSS selection in addition to the Javay:

But in all fairness, perhaps the author of davidsonbicycles created the site long before this research was available. So, credit may be in order for cleverness. In the past, I have been bad at maintaining web standards in some of my site designs. I too have sinned. It’s also good that you are dead-set on maintaining web standards. Web developers/designers with such enthusiasm are few and far between. It’s important that we continue to trade ideas and encourage each other in this important issue of XHTML compliance, because if we don’t push it, then no one else will.

posted at 11:28 am on January 22, 2004 by RazorX

259 Well written.

So many times I read articles about Flash, HTML, etc.. and I get confused, quickly (that is of course, unless I had had about 3 Starbucks Doubleshots)…

It was simple, easy to understand, and flowed well for me – and now.. to try it!

posted at 02:32 pm on January 22, 2004 by BleuDesigner

260 Cool...but parameters don't pass well

Interesting reading. I tried it on a site I am developing, using flash for navigation. We have 5 categories, each with a color theme controlled by css, and matched in the flash navigation: Within the flash movie I change the color of a rectangle serving as a background, and text color, depending on the arguments passed to the flash movie via the URL. When I added these arguments to the definition of “path” they seem to have been lost by the time the movie plays. I’m still somewhat of a newbie to all of this, so if I missed something, please enlighten me. [Using the non-compliant code, the process worked fine.]

my code now reads:

</object>

posted at 08:06 am on January 23, 2004 by Shoshana Zakar