
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
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
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!
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
no one?
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.
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.
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".
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
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
Thanks a lot.
I had the same problem. Thanks for the help!!
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???
bc.. style="position:absolute;top:100px;left:100px;"
See the CSS resource that I posted above for the details of CSS positioning.
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)
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!
Nobody knows?
@Itzo – That should work…where are you running this on your site?
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...
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...
Glad you ‘fixed it’ :)
Regarding the wrapping, that would require some css hacking, but it is probably possible to do something.
Can you share some ideas?
I do not want to be a hacker, but want to make things work... :P
I am not sure, to be honest.
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
Put <center></center> tags around – <div id="player" style="text-align:center; vertical-align:middle;">This text will be replaced</div>
nice,it works. thanks Ethan
Np
Thanks Ethan anyway :)
Np :)
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?
Can you provide a link…?
Thanks Ethan, worked like a charm. Business cat says, "This meeting is over."
:-)
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>
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.
Np.
Sorry for my English =))))
This help me:
<div style="SOMETHING">
<div id="PLAYER"></div>
</div>
=))) my site Music - http://3-listka.ru
<div style="text-align:center;">
<div id="PLAYER"></div>
</div>
Yes, that works :)
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
No, you need to use html/css.
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.
Change:
<div style="text-align:center;">To:
<div style="text-align:center;" align="center">Does that work?
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>
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>
Yes, please provide a link!
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.
Np, glad you got it…
:)
:)
@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.
Thanks for sharing :)
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/
Great, glad you got it, thanks for sharing! :)