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

I want to make jwplayer 7 play 4:3 aspect ratio on mobiles and16x9 on PCs....what I should do?

I want to make jwplayer 7 play 4:3 asxpect ration on mobiles but 16x9 on PCs....what I should do?

On jwplayer 6, it is working fine but on jwplayer 7 it is not now, although I have configured the player as 16x9 and responsive.. below is my config..is there anything I can do on CSS?

<script type='text/javascript'>
jwplayer('reviewplayer').setup({

file: 'https://www.meritmeter.com/upload/reviews/uploaded/1447523005.mp4',

image: '',
title: '',

height: '100%',
volume: 90,
mute: false,
aspectratio: '16:8.1',

autostart: 'true',
stretching: 'fill',
abouttext: 'Meritmeter.com',
aboutlink: 'https://www.meritmeter.com',
});
</script>

17 Community Answers

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

My name is Alex and I am one of the Support Engineers at JW Player. I will be more than happy to assist you with your questions.

There is no built-in way to accomplish this. The easiest thing to do is to provide two different sources, one in 16:9 and one in 4:3, and create some custom JavaScript to check the user agent of the device and create the embed code that way.

If you don’t mind me asking, however, what would be the use case for this? Most mobile devices are meant to handle 16:9 a lot better than 4:3.

Thanks you.

Up Down

shadi

User  
0 rated :

Alex,

Check the below on your iPhone or Android, or use Firefox and use developer-> Responsive design view.

You will see the player is filling half of the frame and the the video screen is very small.

https://www.meritmeter.com/reviews/view/32/eos-50d

Besides, I am wondiering why there is teo black bars on the sides on it plays in html5 and they disappear when it is played in flash.

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

I do see what you are seeing when viewing your page on mobile devices, but that is not related to our player. It looks like there is some conflicting CSS on the page that is causing that. I looked for a little bit to see if something was popping out to me, but I did not see anything. However, when I take your player library and video and embed it on this test page, you see that the video appears just fine in the player.

As for your second issue, I am also unable to reproduce it on a test page. You can see on the test page that the video is appearing the same when it is rendered in HTML5 and Flash. There may be some conflicting CSS at fault here too.

Please let me know if you need any more help or have any other questions.

Thank you!

Up Down

shadi

User  
0 rated :

Alex,

I never had an issue with Jwplayer 6, all the those appeared when I switched to Jwplayer 7. why is that? I do not think it is a CSS.

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

One of the biggest changes between JW Player 6 and 7 is that we switched to using CSS for our interface, which was not the case in JW 6, so it could very easily be the case.

Please let me know if you need any more help or have any other questions.

Thank you!

Up Down

shadi

User  
0 rated :

So how can fix this in JW7? Any suggestions to make JW7 to work the same as JW6 from CSS perspective?

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

It’s not really a fix that needs to be done in our player. If you take the same player and put it on a test page with no other CSS, it would look like it should. There’s other CSS on the page that would be conflicting with it. One thing to look for is if your CSS acts on the <video> or <object> tags, as we see that quite a bit.

Please let me know if you need any more help or have any other questions.

Thank you!

Up Down

shadi

User  
0 rated :

Alex,

No, I checked CSS we are not using Video or Object. Below is the html page source,

<div class="speech-bubble-content">


<script src="https://content.jwplatform.com/libraries/xxxxx.js"></script>

<!--

div for the player

-->
<div id="reviewplayer" class="jwplayer jw-reset jw-skin-vapor jw-stretch-fill jw-flag-aspe…jw-flag-compact-player jw-state-paused jw-flag-user-inactive" tabindex="0" style="width: 100%; height: 317px;">

<div class="jw-aspect jw-reset" style="padding-top: 50.625%;"></div>


I managed to change the padding-top: to 65% and it looks it has solved the issue on the small screen, but I ajvge changed it from the html editor, I need to change it in the CSS, where I should go based on the above code? jw-aspect jw-reset does not exist on my server and it seems it is coming from you JWplayer, so how can influence the that padding-top value?

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, Shadi.

As I’ve said, this issue is related to the CSS on your page and not with our player, so it is outside of our scope of support. If you take the player and put it on a page with no other CSS, it will look normal. With that being said, I always try to take a look to see if I can find something but I was not able to in your case, so this would be on your end to resolve.

Thank you.

Up Down

shadi

User  
0 rated :

Alex,

As I have said, I did not have any issues with my CSS with Jwplayer 6, the issues started to appear when you guys introduced Jwplayer 7 and you mentioned that JWplayer 7 uses now CSS, so the damage came from Jwplayer not from my CSS and now Jwpalyer CSS is conflicting with my CSS...whom to blame now? and who should help to fix the issue....???

anyway...thanks!


Up Down

Alex

JW Player Support Agent  
1 rated :

Hi, Shadi.

Have you followed my recommendation and built a test page with our player on it with no other CSS?

All of our CSS classes that we have built are done so with the prefix “jw” so to minimize any conflict with existing CSS. With that being said, any time there are CSS conflicts, we usually find that there is some CSS acting on elements such as “<video>” or “<object>” or even “<div>”. The only thing I can notice when going back over your page is line 63 in slick.css that sets the max-width attribute of the <video> tag to be 100%. If you uncheck that rule in Chrome’s Dev tools, then the video gets back to scale but the positioning is still off.

I hope that gets things started for you. As I said before, debugging CSS conflicts with our player is outside of our scope of support, so I will not be able to assist you any further regarding this issue.

Thank you!

Up Down

shadi

User  
0 rated :

Hi Alex,

Thanks! Yes, that solved one issue but still the player is off on the small screens, I will be so grateful if you can help me pin point the issue in my CSS on why the controls are up on the mobile screens.

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, Shadi.

I’ve tried numerous times to try to find the issue in your CSS and unfortunately cannot find it. I am sorry I cannot be of more help.

Up Down

shadi

User  
0 rated :

I found what’s the problem but I need your help, if you still can help. It is all in the padding-top value but this value is assigned by Jwplayer but I need to assign it from the CSS for each screen size and it should affect this value in Jwplayer.


I need to influence Jwplayer in the below command for PC screens


<div style="padding-top: 50.25%;" class="jw-aspect jw-reset"></div>

And the below for the mobile screens.

<div style="padding-top: 68.625%;" class="jw-aspect jw-reset"></div>

The current value is

<div style="padding-top: 56.625%;" class="jw-aspect jw-reset"></div>

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, Shadi.

Try adding the below CSS rule to your small.css file.

.jw-aspect {
  padding-top: 68.625% !important;
}

Please let me know if that works. Thanks.

Up Down

shadi

User  
0 rated :

YES!!!! it is working now! Thank you! You were amazing!

Up Down

Alex

JW Player Support Agent  
0 rated :

I’m glad its working for you now, Shadi!

Please let me know if you need any more help or have any other questions.

Thank you!

This question has received the maximum number of answers.