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

Video Won't Center on Firefox

Hello,

I have a video displayed on this page:

http://www.3weekdiet.com/norman.html

On all browsers - Safari, Chrome, IE, and Mobile - the video is in the Center where it should be (in the box).

However, on Firefox (latest version), the video is shifted to the right:

http://i.imgur.com/xfmIk1G.png

I have tested on Multiple PC's - and the same error appears.

This error only goes away when I set the height and width to fixed and remove the aspect:ratio.

However, I need the video to be responsive for different browsers and devices.

Does anyone know a fix for this?

10 Community Answers

Up Down

contact

User  
0 rated :

I am on 1680 x 1050 display by the way.

Up Down

wmeier

User  
0 rated :

@contact

using FF 30, FF 31, FF32, FF 33 centers perfectly

I wonder IF it is an issue of the cache.

FF has a great add-on that will clear the cache, I use it alot whenever I've made a change and checking

Another great add-on which will check your responsiveness is Web developer

Here is something that I also use
<code>
if (navigator.userAgent.match(/iPhone/i) != null){
document.write('<meta name="viewport" content="width=width=320.1,initial-scale=.5,minimum-scale=.5,maximum-scale=.5,user-scalable=no" />');
} else
if (navigator.userAgent.match(/iPad/i) != null){
document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
} else {
document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
}

function hideURLbar() {
if (window.location.hash.indexOf('#') == -1) {
window.scrollTo(0, 1);
}
}
if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('iPad') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
</code>

Up Down

wmeier

User  
0 rated :

ooops forgot
the code above is a script which is placed in the head element just above the meta declaration

otherwise JavaScript should be placed at the end of the document above the closing body element

Up Down

wmeier

User  
0 rated :

There is also something that you may be able to use which is also what I use for my pages on my web site to vertically center the container being used; again they are placed in a JavaScript file AND works beautifully for both screen modes.

(1) normal screen
var b=document.getElementById('container');
var hdth = ((window.innerHeight - b.offsetHeight)/2) +"px";
document.getElementById('container').style.top=hdth;

(2) fullscreen
var b=document.getElementById('container');
var hdth = ((screen.height - b.offsetHeight)/2) +"px";
document.getElementById('container').style.top=hdth;

Up Down

MisterNeutron

User  
1 rated :

Is the problem showing up in Firefox under WinXP or OSX? If so, this is a known problem with responsive video in JW6 in Flash mode. Firefox under Win7/8 uses HTML5 mode, so you won't see it there.

A demo:

http://misterneutron.com/JW6videoCenterFlashERR/

Up Down

contact

User  
0 rated :

Yes- the problem is on WinXP and OSX. It must be that problem exactly.

Is there any fix for that? 25% of the population still uses XP!

Up Down

MisterNeutron

User  
0 rated :

I'm not aware of any fix - someone from JW Player will need to address this.

But all support for WinXP ended in April, 2014. There are a lot of people still using it, but if they use Chrome, there's no problem. You should also look at your own site stats - you might discover that very few of your visitors are using WinXP. On my own main site, for example, the WinXP visitors this year account for only 7% of the visitors, and of those, half were using Chrome.

Worldwide browser or operating system usage statistics aren't what matter. What matters is what YOUR visitors are using.

Up Down

jherrieven

User  
0 rated :

Try setting the left margin of the flash wrapper to "minus the width" of the player.

So for @contact:

#playerpgyUJRzwUwYH_wrapper{
margin-left:-100% !important;
}

@MisterNeutron, yours would therefore be:

#myElement_wrapper{
margin-left:-65% !important;
}

(if you wanted to fix it that is!)

James Herrieven

Up Down

MisterNeutron

User  
0 rated :

@James: Nice little workaround! I'll leave my demo alone, of course, since it really is a JW Player bug that should be fixed.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, it only happens when Flash is used. I filed a ticket for this.

This question has received the maximum number of answers.