SWFObject's Default CSS Injection

Hide and Go Seek!

SWFObject uses a tiny bit of JavaScript and CSS to hide the contents of the target element before the SWF loads, preventing visitors from seeing the fallback content before the Flash SWF has a chance to load.

To achieve this, SWFObject appends a <style> element to the page that sets the visibility of the target element to hidden. Then, once the Flash <object> is embedded, SWFObject sets the object's style to visibility: visible.

Here's what it looks like from start to finish.

Original HTML

<html>
<head>
<title>My SWFObject Page</title>
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
</script>
 
</head>
 
<body>
 
<div id="flashcontent">
My fallback content goes here. 
This is what will display if 
Flash Player is not available
or is outdated.
</div>
 
</body>
</html>

HTML after being modified by SWFObject but before the SWF is embedded

Note the inclusion of a new <style> element in the document's <head>.

(Some lines wrapped for legibility.)

<html>
<head>
<title>My SWFObject Page</title>
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
</script>
 
<style media="screen" type="text/css">
#flashcontent {visibility: hidden}
</style>
 
</head>
 
<body>
 
<div id="flashcontent">
My fallback content goes here. 
This is what will display if 
Flash Player is not available
or is outdated.
</div>
 
</body>
</html>

Final HTML (SWF has been successfully embedded)

Note the inline style attribute on the embedded <object>. This is intended to counteract the <style> element in the document's <head>.

(Some lines wrapped for legibility.)

<html>
<head>
<title>My SWFObject Page</title>
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
</script>
 
<style media="screen" type="text/css">
#flashcontent {visibility: hidden}
</style>
 
</head>
 
<body>
 
<object style="visibility: visible;" 
        id="flashcontent" 
        data="mymovie.swf" 
        type="application/x-shockwave-flash" 
        height="400" 
        width="550">
</object>
 
</body>
</html>

Disabling SWFObject's Default CSS Behavior

Not everyone will want this CSS injected into their page. To prevent SWFObject from inserting this CSS, simply add this line of JavaScript to your page:

swfobject.switchOffAutoHideShow();

Your page would then look like this:

Pre-Embed HTML

<html>
<head>
<title>My SWFObject Page</title>
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
swfobject.switchOffAutoHideShow();
swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
</script>
 
</head>
 
<body>
 
<div id="flashcontent">
My fallback content goes here. 
This is what will display if 
Flash Player is not available
or is outdated.
</div>
 
</body>
</html>

Post-embed HTML (SWF has been successfully embedded)

(Some lines wrapped for legibility.)

<html>
<head>
<title>My SWFObject Page</title>
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
swfobject.switchOffAutoHideShow();
swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
</script>
 
</head>
 
<body>
 
<object id="flashcontent" 
        data="mymovie.swf" 
        type="application/x-shockwave-flash" 
        height="400" 
        width="550">
</object>
 
</body>
</html>

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!