Lab: SWFObject

Scaling a SWF to 100% width and height

You can stretch a SWF to fit the browser window by using the percentage "100%" instead of pixel sizes in the SWFObject code. You'll also need to set some CSS properties for the HTML page:

html {
  height: 100%;
  overflow: hidden; /* Hides scrollbar in IE */
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#flashcontent {
  height: 100%;
}

The html element's height needs to be set to 100% because of inheritence: using 100% height for #flashcontent will only work if its parent (in this case body) is set to 100%, which in turn will only work if its parent (html) is also set to 100%.

Note: Elements in the example SWF were masked in the FLA file prior to export.

Working examples: static publishing | dynamic publishing (tested in Firefox 2, IE 6, and Safari 3.1 Windows).

exactFit

By default, Flash Player will scale a SWF with a fixed aspect ratio (equivalent of setting scale = "showAll"). If you want the SWF to fit the browser 100% in both directions, you must set the "scale" parameter to "exactFit". Note that this will probably distort your SWF.

Static publishing requires adding two <param> elements as follows:

<object id="flashcontent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
  <param name="movie" value="/lab/_common/sample-masked.swf" />
  <param name="scale" value="exactFit" />
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="/lab/_common/sample-masked.swf" width="100%" height="100%">
  <param name="scale" value="exactFit" />
  <!--<![endif]-->
    <p>Please update your Flash Player</p>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

Dynamic publishing requires adding the scale parameter as follows:

<script type="text/javascript">
var flashvars = {};
var params = { scale: "exactFit" };
var attributes = {};

swfobject.embedSWF("mymovie.swf", "flashcontent", "100%", "100%", "7", false, flashvars, params, attributes);
</script>

Working examples for "exactFit": static publishing | dynamic publishing (tested in Firefox 2, IE 6, and Safari 3.1 Windows).

noScale

If you would like the SWF to fit the browser 100%, but don't want the contents of the SWF to be resized -- no shrinking or enlarging the SWF's content -- you must set the "scale" parameter to "noScale" (see above for code examples). By default, your SWF content will be centered in the browser and the stage background color will fill the unused areas. If you wish, you could use the parameter "salign" to align your SWF content (the 'stage' of the SWF).

Working examples for "noScale": static publishing | dynamic publishing (tested in Firefox 2, IE 6, and Safari 3.1 Windows).

noScale & salign

If you would like to use noScale but align your SWF content (the 'stage' of the SWF) to something other than center, you can use the parameter "salign". Read Flash's documentation for more info about the alignment options. For examples on how to add a parametere, see the exactFit section above.

Working examples for "noScale" with salign set to "TL": static publishing | dynamic publishing (tested in Firefox 2, IE 6, and Safari 3.1 Windows).