100% Width and Height in Browser

You can stretch a SWF to fit the browser window by using a value of “100%” in the SWFObject embed code. You’ll also need to set some CSS properties in your 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 inheritance; 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.

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="/swfobject/assets/sample-masked.swf" />
  <param name="scale" value="exactFit" />
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="/swfobject/assets/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:

var flashvars = {};
var params = { scale: "exactFit" };
var attributes = {};
swfobject.embedSWF("mymovie.swf", "flashcontent", "100%", "100%", "7", false, flashvars, params, attributes);

Working examples for “exactFit”: static publishing | dynamic publishing.

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.

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”. Search Adobe’s Flash documentation for more info about the alignment options. For examples on how to add a parameter using SWFObject, see the exactFit section above.

Working examples for “noScale” with salign set to “TL”: static publishing | dynamic publishing.

Questions or Comments?

If you have questions or would like to point out an error, please post your remarks in the SWFObject Google Group. Thanks!