advanced code snippet search

Posted By

adrianparr on 07/10/10


Tagged

css html browser embed centre center swfObject swf horizontal vertical


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Demian
rukarmr
davidino1978


Centre Flash Movie (SWF) in Browser Horizontally and Vertically (Using CSS and SWFObject 2.2)

 / Published in: ActionScript 3
 

URL: http://www.adrianparr.com/flash/center_flash_movie_in_browser/index.html

This CSS code is useful if you want to centre your Flash Movie in the browser horizontally and vertically.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. 	<head>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.  
  7. 		<title>Centre Flash Movie in Browser</title>
  8.  
  9. 		<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
  10. 		<script type="text/javascript">
  11. 			var flashvars = {
  12. 			};
  13.  
  14. 			var params = {
  15. 				menu: "false",
  16. 				scale: "noScale",
  17. 				allowFullscreen: "true",
  18. 				allowScriptAccess: "always",
  19. 				allowNetworking: "all",
  20. 				bgcolor: "#ffffff",
  21. 				base: "swf/"
  22. 			};
  23. 			var attributes = {
  24. 				id:"flashMovie"
  25. 			};
  26. 			swfobject.embedSWF("swf/flash_movie.swf", "flashMovie", "550", "400", "9.0.0", "swf/expressinstall.swf", flashvars, params, attributes);
  27. 		</script>
  28.  
  29. 		<style type="text/css">
  30.  
  31. 		html, body {
  32. 			height: 100%; /* This value has to be set */
  33. 			margin: 0;
  34. 			padding: 0;
  35. 		}
  36.  
  37. 		div#shim {
  38. 			float: left;
  39. 			visibility: hidden;
  40. 			width: 100%;
  41. 			height: 50%;
  42. 			margin-top: -200px; /* This has to be half the height of the element you want to center */
  43. 		}
  44.  
  45. 		div#wrapper {
  46. 			clear: both; /* This value has to be set */
  47. 			width: 550px;
  48. 			height: 400px; /* Need to specify a height */
  49. 			background: #f5f5f5;
  50. 			margin: 0 auto; /* This centres horizontally */
  51. 		}
  52.  
  53. 		</style>
  54. 	</head>
  55.  
  56. 	<body>
  57.  
  58. 	<div id="shim"></div>
  59. 	<div id="wrapper">
  60. 		<div id="flashMovie">
  61. 			<a href="http://www.adobe.com/go/getflashplayer"><img 
  62. 				src="http://www.adrianparr.com/images/160x41_Get_Flash_Player.jpg" 
  63. 				alt="Get Adobe Flash player" border="0" width="160" height="41" /></a>
  64. 		</div>
  65. 	</div>
  66.  
  67. 	</body>
  68. </html>

Report this snippet  

You need to login to post a comment.