Align player
Hi there, I 've just installed JW players that runs smoothly, but I was wondering how to put the player in the center of the page (by default it goes bottom left), do I have to change something and how?
Thanks
52 Community Answers
JW Player
User
0
rated :
If you post your player code, including the HTML related to the player, we won't have to guess and may even be able to give you an answer that works!
JW Player
User
0
rated :
Thanks, here's the code...
Beside, you're asking me the HTML, but I only copy this code into a text, uploaded it to FTP and then renamed it into HTML. May I need something else?
<script type="text/javascript" src="http://www.mysite.com/mediaplayer/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://www.mysite.com/mediaplayer/player.swf','mpl','600','400','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&duration=310&file=http://www.mysite.com/mediaplayer/video.flv&image=http://www.mysite.com/mediaplayer/video.jpg&stretching=exactfit');
so.write('player');
</script>
Thanks again
JW Player
User
0
rated :
no one?
JW Player
User
0
rated :
Any styling should be applied to the HTML container element:bc.. <div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
A good resource for CSS is:
*http://www.w3schools.com/Css/pr_pos_vertical-align.asp*
And of course Google.
JW Player
User
0
rated :
Thanks, it works, but I 've searched but did not find how to move the player in a specific place into the HTML, can anyone help me to do this?
Thanks again for help.
JW Player
User
0
rated :
The player will automagically appear wherever you place this:bc.. <div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
Just be sure that your in-line JavaScript player code follows anywhere after the division element with an id of "player".
JW Player
User
0
rated :
bc.. The player will automagically appear wherever you place this:
it only appears in middle bottom...
bc.. Just be sure that your in-line JavaScript player code follows anywhere after the division element with an id of "player".
I'm sorry I 'm not following you anymore, it's too new for me, can you give me more clues?, are you talking about the SWFobject?
Thanks
JW Player
User
0
rated :
Lets say you have three paragraphs, then you want the video player, then two more paragraphs.
first paragraph
second paragraph
third paragraph
<div id="player" ...
fourth paragraph
fifth paragraph
JavaScript
var so = blah, blah, blah
end of document
JW Player
User
0
rated :
Thanks a lot.
JW Player
User
0
rated :
I had the same problem. Thanks for the help!!
JW Player
User
0
rated :
Hello LefTy I followed your instructions to align
<div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
it did center but can I align by px? like for example 100px=left???
JW Player
User
0
rated :
bc.. style="position:absolute;top:100px;left:100px;"
See the CSS resource that I posted above for the details of CSS positioning.
JW Player
User
0
rated :
How about using short-codes in Wordpress, like...
[jwplayer config=player file=http://mysite.com/home.flv]
How to align this player in Wordpress to the LEFT, and have some text on the RIGHT :)
The alignment seems to be "none" so the text falls below the player :)
I realize this is very basic, but thanks for your help :)
Example: [jwplayer config=player file=http://doubletimetoday.com/video/home.flv] (SOME TEXT HERE)
JW Player
User
0
rated :
I've been trying...
<div style=text-align: left;>[jwplayer config=player file=http://mysite.com/video/home.flv]</div>
<left>[jwplayer config=player file=http://mysite.com/video/home.flv]</left>
Putting in the theme's stylesheet:
#player1 {text-align: left;}
NONE of them worked!
JW Player
User
0
rated :
Nobody knows?
Ethan Feldman
JW Player Support Agent
0
rated :
@Itzo – That should work…where are you running this on your site?
JW Player
User
0
rated :
Thanks Ethan, I "fix it"...
I just made the video wider so I do not have to put text on the side :))...
doubletimetoday.com (call me crazy!)
too many complications :P
For the theme I use, the code above did not work... I do not know...
I'll test it in that way... if it is not appealing enough, perhaps I'll hire a programmer to fix it for me :P & try different variations of it...
JW Player
User
0
rated :
I was kind of looking for wrapping the video and the text can be shown on the side of the video...instead of being displayed below the video...
Ethan Feldman
JW Player Support Agent
0
rated :
Glad you ‘fixed it’ :)
Regarding the wrapping, that would require some css hacking, but it is probably possible to do something.
JW Player
User
0
rated :
Can you share some ideas?
I do not want to be a hacker, but want to make things work... :P
Ethan Feldman
JW Player Support Agent
0
rated :
I am not sure, to be honest.
JW Player
User
0
rated :
hi,
i still have a problem,i cant put my player on the center of the page and it's all the time on the left side
this is my code:
<div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
<script type="text/javascript">
jwplayer("player").setup({
flashplayer: "player.swf",
file: "clip.flv",
height: 270,
width: 600
});
</script>
<script type="text/javascript" src="jwplayer.js"></script>
<video class="jwplayer" src="clip.flv"></video>
could you help me?
thanks
Ethan Feldman
JW Player Support Agent
0
rated :
Put <center></center> tags around – <div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
JW Player
User
0
rated :
nice,it works. thanks Ethan
Ethan Feldman
JW Player Support Agent
0
rated :
Np
JW Player
User
0
rated :
Thanks Ethan anyway :)
Ethan Feldman
JW Player Support Agent
0
rated :
Np :)
JW Player
User
0
rated :
none of this works for me, except <center> (thanks ethan), which only centers horizontically.
my code:
<center>
<div id="container" style="text-align:center; vertical-align:middle;">loading ...</div>
</center>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "player.swf",
file: "clip.flv",
height: 480,
width: 640
});
</script>
table and valign not working either. isnt there a working way to center it vertically?
Ethan Feldman
JW Player Support Agent
0
rated :
Can you provide a link…?
JW Player
User
0
rated :
Thanks Ethan, worked like a charm. Business cat says, "This meeting is over."
Ethan Feldman
JW Player Support Agent
0
rated :
:-)
JW Player
User
0
rated :
Hey all.
I'm not getting any luck with this. I'm using wordpress and I've tried plugging in the code and have had no luck centering my video on the page.
How would I then center this video using this code?
<div id='H1qhd' style='width:720px;height:480px;'><a href='http://longtail.tv/v/GSbUQ'>Loading from LongTail.tv...</a></div>
<p>Published via <a href='http://longtail.tv/v/GSbUQ'>LongTail.tv</a></p>
<script src='http://longtail.tv/jx/H1qhd' type='text/javascript'></script>
JW Player
User
0
rated :
Fixed it.
The <center> tags before and after fixed it. No need for any other code other than <center> before and after. Thanks again Ethan.
Ethan Feldman
JW Player Support Agent
0
rated :
Np.
JW Player
User
0
rated :
Sorry for my English =))))
This help me:
<div style="SOMETHING">
<div id="PLAYER"></div>
</div>
=))) my site Music - http://3-listka.ru
JW Player
User
0
rated :
<div style="text-align:center;">
<div id="PLAYER"></div>
</div>
Ethan Feldman
JW Player Support Agent
0
rated :
Yes, that works :)
JW Player
User
0
rated :
Hello,
Is there any other way to center the video without using html or css code?
Can there be any additional shortcode codes for alignment in the JW Player shortcode?
Thank you
Ethan Feldman
JW Player Support Agent
0
rated :
No, you need to use html/css.
JW Player
User
0
rated :
Hello!
Grrrr this is rather frustrating. Ive tried to find a perfect solution, but nothing seems to work from what I read here.
Im using Wp plug-in with a simple insert. The HTML looks like this:
<div style="text-align:center;">
[jwplayer config="VIDEO PLAYER 1" mediaid="2978"]
</div>
I still cant get this to center.
Ethan Feldman
JW Player Support Agent
0
rated :
Change:
<div style="text-align:center;">To:
<div style="text-align:center;" align="center">Does that work?
JW Player
User
0
rated :
Just about giving up with this - I used to use the previous versions no problems but some friends have IPads so want to use MP4 files instead of .flv, hence the change. Just can't get the video centred. Here's my code:-
<<!In head section!>>
<script type="text/javascript" src="/medplay/jwplayer.js"></script>
<<!In body!>>
<div id="container">
<div id="container" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "medplay/player.swf",
file: "/medplay/PCA1.mp4",
image: "/medplay/nose.jpg",
height: 400,
width: 480
});
</script>
JW Player
User
0
rated :
let's see a link here
But I do see that you have id=container listed twice which cannot be as an id can only be used once.
have you tried the following BUT looking a a test page or link would be the better
bc.. <div style="margin:0 auto !important">
<div id="container">This text will be replaced</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "medplay/player.swf",
file: "/medplay/PCA1.mp4",
image: "/medplay/nose.jpg",
height: 400,
width: 480
});
</script>
</div>
Ethan Feldman
JW Player Support Agent
0
rated :
Yes, please provide a link!
JW Player
User
0
rated :
Thanks for the help, but it still won't centralise, so my workaround is to insert a table the same size as the player. This does the same job, so that will do for now.
Ethan Feldman
JW Player Support Agent
0
rated :
Np, glad you got it…
JW Player
User
0
rated :
:)
Ethan Feldman
JW Player Support Agent
0
rated :
:)
JW Player
User
0
rated :
@Willie Meier
You forgot to add a width to your code. The default width is as wide as possible so "margin:auto;" won't do what you want. BTW: you don't need "!important" either.
This works and also passes HTML5 validation at http://validator.w3.org
bc.. <div style="width:640px;margin:10px auto;"><div id="mediaplayer">JW Player goes here</div></div>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "surfing.flv",
image: "surfing.jpg",
width: 640,
height: 360
});
</script>
Unfortunately you end up with the width in two places.
Ethan Feldman
JW Player Support Agent
0
rated :
Thanks for sharing :)
JW Player
User
0
rated :
Make JWPlayer 6 Centered - SOLVED!!!!
<!-- START VIDEO CODE /////////////////////////////-->
<center><div id="player" style="text-align:center; vertical-align:middle;">Loading player...</div></center>
<p align="center">
<script type='text/javascript'>
jwplayer('player').setup({
file: "http://your-site.com/video-name.mp4",
width: "320",
height: "240",
image: "http://your-site.com/preview-image-name.jpg",
});
</script>
<!-- END VIDEO CODE /////////////////////////////////////////////////// -->
View Source Here:
http://bud-meyers.com/video/
Ethan Feldman
JW Player Support Agent
0
rated :
Great, glad you got it, thanks for sharing! :)
This question has received the maximum number of answers.