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

Can't center responsive video

Maybe I'm missing something obvious here. Compare:

JW6: http://misterneutron.com/JW6videoResponsive/

JW7: http://misterneutron.com/JW7responsiveNocenter/

I've tried every CSS trick I know, applying text-align: center; and margin: 0 auto; to both the wrapping div and to the myElement div, complete with !important attributes. Nothing works. Something in the JW script itself is stubbornly overriding my CSS.

If you tinker with the developer tools, you will be fooled into thinking you've cracked the problem by applying margin: 0 auto to myElement. But that doesn't actually work when the player loads - it's executing some kind of reset that clobbers it again.

6 Community Answers

Up Down

wmeier

User  
-1 rated :

@MisterNeutron

Here is something you can try whch I haven't done so as I am still looking through the documentation and waiting a reply to a couple of queries from support.

I center the JWPlayer using the following:

var b = document.getElement("container");
var hdth = ((windows.innerheight-b.offsetsetHeigth)/2)+"px";
document.getElement("container").style.top = hdth;

you will have to chnage the name of the container BUT and thinking off the top of my head that this will also work in a responsive enviornment.(works great in both fullscreen or normal mode).

Worth a try, right?

Up Down

MisterNeutron

User  
0 rated :

Well, that seems like an awfully long way to go, simply to do something that's very simple in CSS, and worked just fine in JW6.

Up Down

jherrieven

User  
0 rated :

Specificity is the key here.

".jw-reset" is the selector responsible for setting the margin to 0.

Override this by including a more specific statement:

#myElement.jw-reset{
margin: 0 auto;
}

That should do it.

James

Up Down

MisterNeutron

User  
0 rated :

Yes, I was zeroing in on the .jw-reset class. But FFS, why would you write a script that interfered with fairly ordinary webpage CSS? What's wrong with these clowns? Do they not test anything?!

Up Down

jherrieven

User  
0 rated :

How is it interfering?

It's CSS. If your matching selectors/statements are higher in the cascade, they will be overridden by later matching selectors.

JW's CSS will (in most cases) be added to the page after yours by the nature that it is built dynamically.

If you don't want it overridden, you need to be more specific with your selectors than any they add.

I think you'll find there will be a number of instances of this kind of thing happening, but by providing more control over styling / branding, publishers will now have the flexibility and control to manage it themselves - much better than the previous situation where the script *would* interfere.

James

Up Down

MisterNeutron

User  
0 rated :

Don't you find it a little odd that the only way to get the player frame to center on the page is by going after a CSS class that's hidden within the player script itself, something that isn't even documented anywhere? I certainly do. I don't think I've ever encountered that anywhere else.

This question has received the maximum number of answers.