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.

  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.