MACROMEDIA FLASH  back to
FILLING THE WHOLE BROWSER WINDOW  


filling the whole browser window with a flash movie
problem
flash movies don't fill the entire viewing space of the browser window. movies have an undesired gutter between the flash movie and the edges of the browser, as seen in figure 1, below.

figure 1: gutter (shown in white) around a flash movie.
Screenshot: Gutter Around flash Movie



solutions
if you want to get rid of the gutter shown above, you can use one of three solutions that work to varying degrees across the different browsers. the first two solutions use body margins and frames to remove the gutter. in both of those solutions you will still have to set the embed/object tag options of your movie to get your movie to appear the way you want it to. the embed/object options are:

  1. HEIGHT="100%" WIDTH="100%" SCALE="EXACTFIT"
    this combination forces every edge of your movie to the edge of the browser, and distorts your movie to fit the aspect ratio (proportion of height to width) of the browser.
  2. HEIGHT="100%" WIDTH="100%" SCALE="SHOWALL"
    this combination fits the width or height of your movie to the smaller of either the width or height of the browser. your movie will not be cropped or skewed to fit the browser window, but there will be borders on either the top and bottom or right and left of your movie.
  3. HEIGHT="100%" WIDTH="100%" SCALE="NOBORDER"
    this combination adjusts either the height or width of your movie to the larger of either the width or height of the browser. when the dimensions of your movie do not match the dimensions of the browser, your movie will be cropped on either the top and bottom or on both sides.

with those options set, your embedded movie code will look something like this:


<OBJECT
	CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	WIDTH="100%"
	HEIGHT="100%"
	CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">

	<PARAM NAME="MOVIE" VALUE="moviename.swf">
	<PARAM NAME="PLAY" VALUE="true">
	<PARAM NAME="LOOP" VALUE="false">
	<PARAM NAME="QUALITY" VALUE="high">
	<PARAM NAME="SCALE" VALUE="showall">

	<EMBED
	SRC="yourmovie.swf"
	WIDTH="100%"
	HEIGHT="100%"
	PLAY="true" 
	LOOP="false"
	QUALITY="high"
	SCALE="showall" 
	PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=Shockwaveflash">
	</EMBED>
</OBJECT>


once you've embedded your movie on a page with the appropriate embed/object options set, you can then implement either solution one or two, as follows.
solution one: body margin tags
if you are only concerned with addressing users with version 4 and above browsers, you can simply use the body margin tags supported by netscape4+ and ie4+. set the following margin attribute values on the movie page:

<BODY MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0">

netscape4+ will follow MARGINHEIGHT and MARGINWIDTH, while IE4+ will follow TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN.

solution two: single-frame frameset
in order to address users with 2.0 and 3.0 browsers, we must use harsher methods. with the correct attributes set in a frameset, the content of pages in frames can stretch to within 1 or 2 pixels (depending on the browser) of the edge of the browser window. flash movies embedded in pages which reside in framesets will stretch nearly to the edge of the browser window. here's what the above flash movie looks like when it is in a frameset:

figure 2: minimal gutter around a framed flash movie.
Screenshot: Minimal Gutter Around a Framed flash Movie

here's how to use frames to fill the browser window:
step 1)
make the page in which your movie will be embedded. when embedding the movie, set the width, height, and scale for the desired effect as described earlier.

step 2)
make the single frame frameset. actually, it's a two frame frameset, but you only use one of the frames for displaying your page. the first frame is set to 100% of the browser area, and the second frame is set to "*" (meaning whatever is left, which is nothing). set the SRC of the first frame to your movie page, and the SRC of the second page to an empty HTML page with a matching BGCOLOR. then you'll need to specify the right attributes on the frameset and the frames so the contents of your movie frame extend to the edges of the browser.
here's the code with the correct settings:


<HTML>

	<HEAD>
	<TITLE>your flash movie title</TITLE>
	</HEAD>
	
	<FRAMESET ROWS="100%,*" FRAMESPACING="0" FRAMEBORDER="NO" BORDER="0">
		<FRAME NAME="top" SRC="yourmovie.html" FRAMEBORDER="0" BORDER="0"
		MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO">

		<FRAME NAME="hidden" SRC="empty.html" FRAMEBORDER="0" BORDER="0"
		MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO">
	</FRAMESET>

</HTML>

notes:
1) as an attribute of <FRAMESET>, FRAMEBORDER is either true or false, but as an attribute of <FRAME>, FRAMEBORDER is a pixel value for setting the width of the space between the browser edge and the page content.
2) on <FRAMESET>, BORDER refers to the amount of pixels between frames, while on <FRAME>, BORDER is simply a now-obsolete version of FRAMEBORDER.
3) the SCROLLING attribute must be set to NO otherwise, if the content is not larger than the browser window, a gap will appear on the right and bottom of the frame where the scrollbars would normally appear.

STEP 3)
to remove the most possible amount of gutter in ie4 and netscape4, you can optionally set the margin values on the movie page (yourmovie.html) as described in solution one. netscape4+ uses MARGINHEIGHT and MARGINWIDTH, while IE4+ uses TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN. To accomodate both browsers, use:
<BODY MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0">

so why doesn't it work in IE 4.5 on mac?
in ie 4.5 on mac flash movies that are placed on an html page using the standard (and correct) object/embed nesting are pushed down from the top of the page. i have not heard a definitive explanation of why from either macromedia or microsoft. the only possible workaround to the problem is to remove the object tag altogether, using only the embed to place the flash movie on the page. while this approach does remove the gap, it may cause problems for windows versions of ie. in a discussion of whether or not the workaround is advisable, john dowdell of macromedia tech support stated:

"It would be bad. IE/Win32 uses ActiveX Controls much more frequently than it uses Netscape plugins. Most people using IE/Win32 browsers have the flash ActiveX Control. If a page does not have an OBJECT tag then to my knowledge those browsers will not intuit that they should use a particular ActiveX Control to render that EMBED content.

Rephrased, I'd definitely expect that accommodating the IE4.5/Mac audience by removing the OBJECT tag would inconvenience the IE/Win32 audience, which has a *significant* installed base on most sites."


the only option, then, would be to create a special page just for mac ie users which is only displayed if the user is running ie 4.5 on mac (use a javascript to detect that). my recommendation is actually just to leave the gap in ie 4.5/mac because they're a relatively small percentage of normal web traffic.


solution three: link directly to the flash movie (.swf)
instead of embedding the flash movie in an html page, you can link directly to it and let the browser display it inline. so, if you have a page "home.html" that links to your movie page "mymovie.html" and "mymovie.html" contains your movie "mymovie.swf", you would simply change the link on "home.html" from <A HREF="mymovie.html">view my movie</A> to <A HREF="mymovie.swf">view my movie</A>. this method is easier to implement than the frames method, but should be used with caution. take note of the following:
  • linking directly to a .swf file is known to crash aol4, and generally make browsers unhappy.
  • if you link directly to a .swf file, do so only after flash has been successfully detected (otherwise the browser has no access to any of the html instructions that normally tell it where to get the plugin if the plugin is not present).
  • linking directly to a .swf file removes your control over how the movie scales in the browser.
  • remember to set the QUALITY of your movie to "high" from inside your movie using the "Toggle High Quality" action (flash 3+ only) or the _quality property (flash 5+).

revision history
?? ??, 1998: posted.
august 12, 1999: added information about ie 4.5 on mac.
october 08, 1999: reworded solution two to make it more clear. also fixed a typo.
october 22, 1999: fixed another typo.
may 18, 2000: added the cleaner 4.0 browser approach, which is just to use body margin tags. generally re-wrote some of the awkward sections of the info.
oct 13, 2000: added warning about aol crashing when you link directly to a .swf file.
may 22, 2001: fixed a minor error in the object/embed sample code (the object tag used pixel dimensions for height and width, whereas the embed tag used the correct 100% setting). thanks to john lemmon for pointing out the error.