Flash Satay: Embedding Flash While Supporting Standards

by Drew McLellan

265 Reader Comments

Back to the Article
  1. 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;
    }

    Copy & paste the code below to embed this comment.
  2. 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.
    Copy & paste the code below to embed this comment.
  3. 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.

    Copy & paste the code below to embed this comment.
  4. Good

    Copy & paste the code below to embed this comment.
  5. Good

    Copy & paste the code below to embed this comment.
  6. 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!

    Copy & paste the code below to embed this comment.
  7. 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

    Copy & paste the code below to embed this comment.
  8. 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#versi width=“500” height=“500”>’);
    [removed](’ </object> ‘); }
    else{ [removed](’<object data=“movie.swf” type=“application/x-shockwave-flash” width=“500” height=“500”></object>’); }
    //]]>
    [removed]

    <noscript>
    <object data=“movie.swf” type=“application/x-shockwave-flash” width=“500” height=“500”>
    </object>
    </noscript>

    (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:

    <style type=“text/css”>
    html,body {margin: 0; padding: 0; height: 100%;}
    </style>

    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.
    Copy & paste the code below to embed this comment.
  9. 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!

    Copy & paste the code below to embed this comment.
  10. 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 type=“application/x-shockwave-flash”
    data=“navloader.swf?path=jttvinpage.swf&bckgrnd=0xcc00ff&txtcolor=0×000000&txtovercolor=0xcccccc” width=“260” height=“152”>

    </object>

    Copy & paste the code below to embed this comment.
  11. I’m currently working with a number of Flash movies that interact with Javascript for various reasons. 

    When I try using this method it seems that the Flash player in Mozilla browsers is unable to pick up on either the name or id attribute of the object tag (it typically uses the name attribute of embed).

    Does anyone know of a way to use just the object tag but still have FSCommand work properly in Moz?

    Copy & paste the code below to embed this comment.
  12. I’m sorry if this question has been mentioned before.  I have looked through and I cannot find a solution in the forum.  The flash satay method works excellent in Mozilla and IE, but it will not work on Firebird 0.7 for me (flash simply does not appear).  I do not use percentages for the height.  The code is below:

      <object type=“application/x-shockwave-flash” data=“navigationx.swf” width=“730” height=“570” id=“navigation”  top:10px; left:10px;” standby=“The page is loading.  Please wait…”>
     
     
     
     
     
      </object>

    It is not the standby and it is not the transparency parameter.  This can be seen at http://www.xdemi.com/music/main.php

    Any solutions?

    Copy & paste the code below to embed this comment.
  13. This really works and while no container has been used for Flash, the page validates for XHTML. It works in Mozilla, Internet Explorer 6.0, 5.5, 5.01 and other browsers, too.
    <div id=“flash”>
    <object type=“application/x-shockwave-flash” data=“images/banner.swf” width=“288” height=“128”>

    banner.gif
    </object>
    </div>

    Copy & paste the code below to embed this comment.
  14. I just added them, because I didn’t know how ALA display the code.

    Copy & paste the code below to embed this comment.
  15. Re: dusoft
    “This really works and while no container has been used for Flash, the page validates for XHTML.” Well dusoft, not exactly. Sure your code validates, but it does not work in all situations. First off, when I.E. encounters the data element it will not stream. Just pump your banner.swf up to 1 MB and view it with a dial-up to see what I mean. I.E. will give you a white box and wait for the file to completely download before playing it. Second, your code will not work in a full Flash situation. If you change your width/height to 100% you will quickly see a blank screen in newer Netscape/Firebird browsers. You have to remedy that with the appropriate CSS:

    <style type=“text/css”>
    html,body {margin: 0; padding: 0; height: 100%;}
    </style>

    Until Eolas hits, I am using the Javay method over the Satay method to resolve these and more issues. For a more detailed explanation, see previous posts:
    http://www.alistapart.com/discuss/flashsatay/26/

    Your method works good for a small Flash file and because you are not using percents, but it will not work for other situations beyond that. Also buy cutting out the codebase you are giving up an easy way to upgrade older Flash players for your I.E. visitors. And without a codebase, some web devers will try to use entry pages. Entry pages like, “You must have Flash player X to view this site..”, are a big waste. Most people don’t even know what a Flash player is, let alone what version they have. Hell, even I forget what Flash version I have sometimes. Flash player detection through JavaScript or with a Flash movie itself may be needed. Server-side detection is not yet reliable in all browsers.
    Flash detection should always remain invisible to the visitor.

    But a lot of what I’m saying has already been covered in previous posts, though.

    Copy & paste the code below to embed this comment.