Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Center the player

the page is here -- http://training.redcutmarketing.com/

here is the code:

<head>
<script type="text/javascript" src="/jwplayer.js"></script>
<title>Dan Dasilva's CPA Coaching</title>
</head>




<body>
<body style="alignment-adjust:middle">
<h1 align="center">*Thanks For Using Dan Dasilva's Coach! *</h1>
<h1 align="center">*This Coaching Session is For Beginners only! *</h1>
<div id="container">
<p align="center">Loading the player ...</p>
</div>
<div align="center">
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>
</div>
</body>
</html>



Can anyone tell me how to center it please?

36 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
-1 rated :

Change:

<div id="container"> <p align="center">Loading the player …</p> </div>

To:

<div id="container" align="center"> <p align="center">Loading the player …</p> </div>

Up Down

JW Player

User  
0 rated :

i changed it to

<head>
<script type="text/javascript" src="/jwplayer.js"></script>
<title>Dan Dasilva's CPA Coaching</title>
</head>




<body>
<body style="alignment-adjust:middle">
<h1 align="center">*Thanks For Using Dan Dasilva's Coach! *</h1>
<h1 align="center">*This Coaching Session is For Beginners only! *</h1>
<div id="container" align="center">
<p align="center">Loading the player ...</p>
</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>
</div>
</body>
</html>

like @Ethan LongTail mentioned but it still stayed the same http://training.redcutmarketing.com

Up Down

Ethan Feldman

JW Player Support Agent  
-1 rated :

center is not defined
[Break On This Error]

align: center,

Remove this line – align: center,

Up Down

JW Player

User  
0 rated :

where do i put the align: center, code?

?? <div id="container" align: center,> ??

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, in the div…

There is no variable for the player called align…

Up Down

JW Player

User  
0 rated :

ok so i added it heres what my code looks like now

<div id="container" align: center,>
<p>Loading the player ...</p>
</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>

do i have to add align: center, above file: "/video.mp4", ?

Up Down

Ethan Feldman

JW Player Support Agent  
-1 rated :

Change:

<div id=“container” align: center,>
<p>Loading the player …</p>

</div>

To:

<div id=“container” align"center">
<p>Loading the player …</p>

</div>

That’s it !

Up Down

JW Player

User  
0 rated :

I know that doesnt work is what im trying to say...

<head>
<script type="text/javascript" src="/jwplayer.js"></script>
<title>Dan Dasilva's CPA Coaching</title>
</head>




<body>
<body style="alignment-adjust:middle">
<h1 align="center">*Thanks For Using Dan Dasilva's Coach! *</h1>
<h1 align="center">*This Coaching Session is For Beginners only! *</h1>
<div id="container" align"center">
<p>Loading the player ...</p>
</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>
</div>
</body>
</html>

is the code i have right now. the video play pops up and everything is good but it just doesnt center.

Up Down

JW Player

User  
0 rated :

and thanks ethan for trying to help me:/

Up Down

JW Player

User  
0 rated :

@Dan

There are several manners to center.

That said, the link given above has two serious flaws
<ol>
<li> no doctype has been declared</li>
<li> there is no character encoding also not declared</li>
</ol>

As it stands, it will be rendered in the "Quirks" mode.

What is would do is the following in your case:
<ol>
<li> get rid of the align"center" from the player container
center is deprecated and shouldn't be used in place CSS is the much better</li>
<li> you also don't need to have the paragraph element present
<p>Loading the player ...</p> it is somewhat superfluous. In fact one doesn't need to have any text present at all between the division that contains the player. It is only there as I see it as a troubleshooting tool </li>
<li> i would envelop an additional division (div) and center that division<li>

bc.. <div style="margin:auto">
<div id="container">
<p>Loading the player ...</p>
</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>
</div>



There are several other methods that you may use which does require some knowledge in CSS as well as HTML, etc.

Up Down

JW Player

User  
0 rated :

@Willie Meier

I replaced your code with what i had. still nothing.

I dont get this at all.

Up Down

JW Player

User  
0 rated :

@Willie Meier this is what i have now

bc.. <head>
<script type="text/javascript" src="/jwplayer.js"></script>
<title>Dan Dasilva's CPA Coaching</title>
</head>




<body>
<h1 align="center">*Thanks For Using Dan Dasilva's Coach! *</h1>
<h1 align="center">*This Coaching Session is For Beginners only! *</h1>
<div style="margin:auto">
<div id="container">
<p>Loading the player ...</p>
</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>
</div>
</body>
</html>


Up Down

JW Player

User  
0 rated :

contact me from off my web site

www.mirana.net

Up Down

JW Player

User  
0 rated :

answer it!

Up Down

JW Player

User  
0 rated :

Here is a reference to look at to give you an idea
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Up Down

JW Player

User  
0 rated :

i know what centering is... I dont know css:(

now im super frusterated becasue it has to be so complicated when it doesnt have to be.

Up Down

Ethan Feldman

JW Player Support Agent  
1 rated :

@dan – if you double nest the divs and make the outer div align center, it will work.

Something like this will work too:

<center><div><div id="player"></div></div></center>

Up Down

JW Player

User  
0 rated :

try using text-align:center instead of margin:auto

but you still haven't declared a doctype or even character encoding as seen in the above example.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

<center> tags work too, and don’t think this guy cares about doctype…

Up Down

JW Player

User  
0 rated :

@Dan

I had the exact same problem and was able to fix my issue with Ethan's advice.

Try this for your code -


<html>
<body>
<title>Dan Dasilva's CPA Coaching</title>
<h1 align="center">*Thanks For Using Dan Dasilva's Coach! *</h1>
<h1 align="center">*This Coaching Session is For Beginners only! *</h1>
<p align="center"> </p>
<p align="center"><a href="http://training.redcutmarketing.com/adrian/">*CLICK HERE AFTER YOU WATCHED THE VIDEO*</a></p>
<script type="text/javascript" src="/jwplayer.js"></script>
<center><div><div id='container'></div></div></center>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/player.swf",
file: "/video.mp4",
height: 480,
width: 640
});
</script>
</body>
</html>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks Rick :)

Up Down

JW Player

User  
0 rated :

I'm glad I found this topic - should have come here first!

I was pulling my hair out trying to center the play <div>.
Doing the usual things, like starting with a valid doctype, and margin 0 auto.

It was ok with Firefox, but not IE or Safari.
Nothing worked.

Out of curiosity, I removed the player out of the div.
Just by temporarily renaming the jwplayer() reference to the div.
And put a line of text in the div instead.

Bingo!
It was centered, as it should be.

Referring the player to the div again, and it was back to being on the left hand side.
The player itself is affecting the layout.

The only thing that centered the player was using the center tags, like this;

<div id="mediaPlayerContainer">
<center><div id="mediaPlayer"></div></center>
</div>

It may be old fashioned, but it works.
Happy now!
:-)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

:-) Nice

Up Down

JW Player

User  
0 rated :

... but but but ...

If you use <CENTER> your page will _ never_ validate as HTML5.

The centering (more precisely the styling) problem arises because the embedding code replaces the video container, along with any style associated with it. I used to use a <span> as a video container, enclosed in a <div> that I could style any way I wanted. If the enclosing <div> isn't responding to styles, then something is awry.

With SWFObject 2.2, we can use its api to set styles for the embedded material, something like:
bc.. if (swfobject.hasFlashPlayerVersion("10.0.0")) {
swfobject.createCSS("#flashContent", "margin-top:5px; margin-left:5%");


where #flashContent is the id attribute of the video container. There's some other arcane tricks available too:
https://code.google.com/p/swfobject/wiki/api

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yeah, you can use div align=“center” instead then.

Up Down

JW Player

User  
0 rated :

Since the jwplayer script rewrites the HTML container element you can create a style that centers the overwritten name.

For example:

if the id is "container" then you can create a "container_wrapper" element in the stylesheet:

#container_wrapper { margin: 0 auto; }

this centers the video

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yeah, I always found double nesting divs, and centering the outer one, seems to work.

Up Down

JW Player

User  
0 rated :

RICK has given the best solution and it worked for me like a charm. Thanks Rick. :)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

:)

Up Down

JW Player

User  
0 rated :


Just getting started on the JW Player.

Im trying to get the vid to center. It is working on FF/Safari but not on Chrome at all. Here is the code. Anyone run into this issue? Inputs appreciated - Thanks!


bc.. <!DOCTYPE html>
<head>
<script type='text/javascript' src='/resource/jwplayer.js'></script>
</head>
<body >

<div><div id='vid'></div></div>
</center>
<script type='text/javascript'> jwplayer('vid').setup({
file: 'http://prod1.vclik.com/s/jcjM456bmq.mp4',
height: 480,
image: 'http://prod1.vclik.com/t/jcjM456bmq',
width: 370 })
</script>
</body>
</html>



Up Down

JW Player

User  
0 rated :

Also, is there any other approach cause I would like to avoid using the CENTER tag all together.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have a link?

Up Down

JW Player

User  
0 rated :

http://prod1.vclik.com/resource/test_jw.html

Check it on chrome ...

Up Down

JW Player

User  
0 rated :

This center-tag/html5 business is disappointing. When will 6.1 become available?

Up Down

JW Player

User  
0 rated :

This center-tag/html5 business is disappointing. When will 6.1 become available?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Really soon, just going through final QA.

This question has received the maximum number of answers.