Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Center Player Horizontally

2 replies [Last post]

I was very happy to find Longtail, I am knew to html and am helping a non profit with adding video to their web.

This code works but player is far left:

<p align="center"><!--webbot bot="HTMLMarkup" startspan --><script type='text/javascript' src='swfobject.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','640','480','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','iPray10-11-09.flv');
so.addVariable('image','iPray4.jpg');
so.addVariable('start','0');
so.addVariable('title','iPray10-11-09.flv');
so.addVariable('autostart','true');
so.write('mediaspace');
</script><!--webbot bot="HTMLMarkup" endspan -->
</p>

<p align="center"> </p>

</body>

</html>

That code was generated by the Longtail setup wizard.

When this version is used the player does not play and the words"this text will be replaced are visible, and centered:

<p align="center"> </p>

<p align="center"><!--webbot bot="HTMLMarkup" startspan --><script type='text/javascript' src='swfobject.js'></script>

<div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>

<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','640','480','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','iPray10-11-09.flv');
so.addVariable('image','iPray4.jpg');
so.addVariable('start','0');
so.addVariable('title','iPray10-11-09.flv');
so.addVariable('autostart','true');
so.write('mediaspace');
</script><!--webbot bot="HTMLMarkup" endspan -->
</p>

<p align="center"> </p>

</body>

</html>

Any ideas on what is causing the player to stop working with this edit?

In the head element:

<script src="swfobject.js"></script>

In the body element:

<div id="wrapper" style="text-align:center; vertical-align:middle;"><a id="mediaspace" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>

<script type='text/javascript'>
  var so = new SWFObject('player.swf', 'mpl', '640', '480', '9.0.124');
      so.addParam('allowscriptaccess',   'always');
      so.addParam('allowfullscreen',     'true');
      so.addVariable('file',             'iPray10-11-09.flv');
      so.addVariable('image',            'iPray4.jpg');
      so.addVariable('start',            '0'); // not really needed - start=0 is the default
      so.addVariable('title',            'iPray10-11-09.flv');
      so.addVariable('autostart',        'true');
      so.write('mediaspace');
</script>

text-align:center and vertical-align:middle will center the contents of the division element NOT the division element itself.

To center the element that contains the player, you need to wrap it in a "wrapper" element. Then your CSS should target the contents of the "wrapper" element.

Google for more CSS centering help.

Thank you Hobbs, That solved all my problems. I appreciate you taking time to to show an amateur what he needed. If you interested the page as humble as it is, is: http://www.stuartfumc.org/Audio%20Sermons/10_11_09.htm