SWFObject embed

**ericflash** · 01-16-2010, 02:26 PM

I'm trying to get my embed code to center the flash stage in the center of the browser with no space at the top of the browser. The code I have below just keeps it left aligned. Can anyone tell me why the style is not working.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="assets/js/swfobject.js"></script>
        <style type="text/css">
	
		body {
			background-color: #ffffff;
			font: .8em/1.3em verdana,arial,helvetica,sans-serif;
		}

		#flashcontent {
			//border: solid 1px #CCC;
			width: 920px;
			height: 644px;
			margin: 0 auto;
		}

		</style>
	</head>
	<body>
		<div id="flashcontent">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
        <script type="text/javascript">
			var flashvars = {};
			flashvars.xmlPath = "assets/XML/main.xml";
			var params = {};
			params.quality = "best";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "always";
			var attributes = {};
			attributes.id = "flashcontent";
			swfobject.embedSWF("Main.swf", "flashcontent", "920", "644", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
		</script>
	</body>
</html>

**Eye for Video** · 01-18-2010, 12:41 PM

Code:

body {
	border: 0px;
	margin: 0px;
	padding: 0px;	
}
#main_container {
	width: 1000px;
	height: 550px; 
	border:none;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}

Will remove space at top and center content. Of course you'll need to add any other style to body or main_container that you need and set width/height as needed.
Best wishes,
Eye for Video
www.cidigitalmedia.com

**ericflash** · 01-18-2010, 12:45 PM

Thanks for your reply but I'm not seeing how that would work with my code.
Is main_container the same as what I have as my ID name "flashcontent" or is this a completely separate div tag? It would be great if you could explain how I could use this in conjunction with my code.

**Eye for Video** · 01-18-2010, 12:54 PM

You could rename main_container to flashcontent or use main_container as a wrapper container if you have a number of other <div>s on the same page.
Various browser have different default padding and margins so it's a good idea to zero those things out from the very beginning to handle those cross browsers differences.
Best wishes,
EfV

**ericflash** · 01-18-2010, 01:01 PM

I just tried adding your code and it still does not center the flash on the browser.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="assets/js/swfobject.js"></script>
        <script type="text/javascript" src="assets/js/swfaddress.js"></script>
        <style type="text/css">
	
		body {
			border: 0px;
			margin: 0px;
			padding: 0px;	
			background-color: #ffffff;
			font: .8em/1.3em verdana,arial,helvetica,sans-serif;
		}

		#flashcontent {
			//border: solid 1px #CCC;
			width: 920px;
			height: 644px;
			border:none;
			padding: 0px;
			margin-left: auto;
			margin-right: auto;
		}

		</style>
	</head>
	<body>
		<div id="flashcontent">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
        <script type="text/javascript">
			var flashvars = {};
			flashvars.xmlPath = "assets/XML/main.xml";
			var params = {};
			params.quality = "best";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "always";
			var attributes = {};
			attributes.id = "flashcontent";
			swfobject.embedSWF("Main.swf", "flashcontent", "920", "644", "9.0.45", "assets/SWF/expressInstall.swf", flashvars, params, attributes);
		</script>
	</body>
</html>

Thanks

**Eye for Video** · 01-18-2010, 01:20 PM

Copy and paste into new html page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	border: 0px;
	margin: 0px;
	padding: 0px;	
}
#flashcontent {
	width: 1000px;
	height: 550px; 
	background-color: #320d07;
	border:none;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}
-->
</style>
</head>

<body>
<div id="flashcontent">
</div>
</body>
</html>

Centers in IE, FF, & Safari
Edit to suit your needs
Best wishes,
EfV

**ericflash** · 01-18-2010, 01:27 PM

This is exactly what I had posted just above your previous post. IF you try adding my SWFObject it still stays to the left of the page and does not center horizontally when scaling the browser.

**Eye for Video** · 01-18-2010, 01:39 PM

Try putting:

Code:

<script type="text/javascript">
			var flashvars = {};
			flashvars.xmlPath = "assets/XML/main.xml";
			var params = {};
			params.quality = "best";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "always";
			var attributes = {};
			attributes.id = "flashcontent";
			swfobject.embedSWF("Main.swf", "flashcontent", "920", "644", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
		</script>

inside the <div>, so move closing tag </div> below script. Right now it's outside and not controlled by CSS
Best wishes,
EfV

**ericflash** · 01-18-2010, 01:42 PM

I already tried that but it didn't make a difference.

**Eye for Video** · 01-18-2010, 01:52 PM

Did you put a background color like #00ff00 in the "flash content"? Be sure that sticks out like a sore thumb for testing. Does that div show up as centered?
When you add the Flash, is it inside or outside that green rectangle (flash content)?
EfV

**ericflash** · 01-18-2010, 01:57 PM

My Flash movie has a background that stands out. The DIV shows up as all the way to the left of the browser.

**Eye for Video** · 01-18-2010, 02:10 PM

Comment out all content of flashcontent except:

Code:

<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>

This should show centered <div> with small Adobe image in top left of <div>.
See photo
Do you see the same thing?
EfV

**ericflash** · 01-18-2010, 02:37 PM

Thanks Eye for Video that's great but the idea here is to be able to put content into the div like flash and if flash is not installed then alternative html content.
I understand that your div tag will center but when the flash object is placed in there it does not. Maybe someone can let me know why this is happening.

Thanks again.

**Eye for Video** · 01-18-2010, 03:07 PM

Yeah sorry I couldn't be more help, but I do understand the idea of inserting Flash and alt content into the <div>. The principle being that the CSS has to work before you attempt to insert the Flash.
I use swfobject and alt html content all the time. Here's just a couple examples of using swfobject and alt content, including a complete text narration to match the Flash video content. That particular alt content was indexed within 4 hours of uploading the page. OH YEAH, I love swfobject! View source to review code, scroll down to

Code:

  <!-- THIS IS ALTERNATE CONTENT -->

http://www.cataractvideo.com/
and
http://www.uncledoodad.com/06_19_09/06_19_09.html
So if your CSS is working correctly, your method of using swfobject is the problem.
Best wishes,
Eye for Video
www.cidigitalmedia.com

**MyFriendIsATaco** · 01-19-2010, 11:47 AM

The problem is with how the newer versions of swfObject work. For a little bit of background, v1.x inserted the actual Flash content INSIDE the element you specified, and the newer 2.x code REPLACES the element.

So the issue is that you're styling the element that is being REPLACED. You need to nest it inside another <div> to actually have it styled properly.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="assets/js/swfobject.js"></script>
        <style type="text/css">
	
		body {
			background-color: #ffffff;
			font: .8em/1.3em verdana,arial,helvetica,sans-serif;
			margin: 0;
			padding: 0;
		}

		#flashcontent {
			//border: solid 1px #CCC;
			width: 920px;
			height: 644px;
			margin: 0 auto;
		}

		</style>
	</head>
	<body>
		<div id="flashcontent"><div id="flashcontent_inner">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div></div>
        <script type="text/javascript">
			var flashvars = {};
			flashvars.xmlPath = "assets/XML/main.xml";
			var params = {};
			params.quality = "best";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "always";
			var attributes = {};
			attributes.id = "flashcontent_inner";
			swfobject.embedSWF("Main.swf", "flashcontent_inner", "920", "644", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
		</script>
	</body>
</html>

That extra <div> is just needed to tell swfObject to replace THAT inner object instead of the one you're actually styling. This is technically a feature in 2.x and gives you a bit more flexibility in how your place your Flash objects on the page.

**ericflash** · 01-19-2010, 12:38 PM

Thanks MyFriendIsATaco I'll give this a try and see how it works. I appreciate all the help from everyone.

Thanks

**Eye for Video** · 01-19-2010, 01:33 PM

Thanks for clarify this!
Best wishes,
EfV

Thread: SWFObject embed

Thread Tools

Display

SWFObject embed

Posting Permissions