Centering a player (for dummies)

7 replies [Last post]

Posted: Tue, 2011-08-23 08:09 Jack Jackson

Howdy.
I need to center my video embed on a page. I've looked in the forums here and elsewhere and seen lots of advice and tips -- but all of it is for people who speak code, and I do not. Completely illiterate!

None of the solutions of writing "<center> .... </center>" or something with <div> work ... but maybe I'm not doing it correctly.

If I generate an embed code from BOTR for a video, it might look like this: <script type="text/javascript" src="http://content.bitsontherun.com/players/r7t802mh-0sJI8pr4.js"></script>

What do I do to get this player centered on a page?

Sincerely, Jack

Posted: Wed, 2011-08-24 05:57 JeroenW

Just copy the CSS from our preview pages ;). We use "display:block" and "margin:0 auto" to center the player:

http://content.bitsontherun.com/players/r7t802mh-0sJI8pr4

Posted: Wed, 2011-08-24 07:34 Jack Jackson

Thanks, Jeroen, but that's not for dummies! ("Just copy the CSS from our preview pages.") Huh?
I understand now how to take an embed code and place it on a page, but beyond that, I have absolutely no idea how things work.
Is it possible to take the embed code I supplied in my note above and add something to it, so that it is centered on a page? Or is it more complicated than that?

Posted: Thu, 2011-08-25 03:25 JeroenW

This will work:

<div style="display:block; margin: 0px auto; width: 480px;">
<script type="text/javascript" src="http://content.bitsontherun.com/players/r7t802mh-0sJI8pr4.js"></script>
</div>

Posted: Tue, 2011-08-30 15:52 Andrew

Note: The above doesn't center in IE9 depending on the doctype (doesn't with 4.0 Transitional).

Posted: Wed, 2012-02-22 19:55 Bob Patrick

I'm having no luck centering the player.

I've tried figuring out the instructions from JeroenW above

[Just copy the CSS from our preview pages ;). We use "display:block" and "margin:0 auto" to center the player:
http://content.bitsontherun.com/players/r7t802mh-0sJI8pr4 ]

However the link is not active.

I've read many of the treads on the subject and am left wondering how could such a simple request not have a relatively straightforward answer. I'm not a programmer, so the more basic the instruction the better. Even better, include it in your setup wizard.

Meanwhile, simple guidance and an updated link will be appreciated.

Bob in LA

Posted: Thu, 2012-02-23 04:23 Bob Patrick

I persisted and discovered the secret:

To center the JW Player using this approach, the <div...> instruction must be placed in the HEAD of the page, not within the BODY where most of the JWPlayer commands are pasted. When I moved the line to the HEAD from the BODY, the video centers up instantly.

Makes sense, too: the "center" command would apply to all the videos that follow on the page.

IINSTRUCTION:
The line is placed within your <head>...</head> section.
It is placed BEFORE your customized <script... > codes that have your unique source file locations and directories.

Like this:

Posted: Thu, 2012-02-23 04:35 remco

While it might work, it might be better to know that Bits on the Run players have the class botrplayer and you might wish to give the botrplayer class styling information using CSS instead.

Centering a player (for dummies)

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company