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

Video doesn't fill player, why not?


This is a manual setup on a Wordpress site using the Genesis Framework and a Genesis child theme with the library added to the head.

I'm not using the Wordpress plugin.

Video plays fine except there's a big black border all around the video.

Here's the page: https://diabeticteststrips.io/lesson/setting-up-freshbooks/

Here's the code:

<center><div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "https://diabeticteststrips.io/wp-content/uploads/freshbooks.mp4",
image: "https://diabeticteststrips.io/wp-content/uploads/freshbooks.png",
skin: "bekle",
width: 900,
height: 506
});
</script></center>

Here's the file size defined in the original file at: 1280x720 HD:

https://snar.ly/x/freshbooks.mp4_Info_2015-04-21_13-51-27.png

Here's the big black border:

https://snar.ly/x/Setting_Up_FreshBooks_-_Diabetic_Test_Strips_2015-04-21_13-51-53.png

Here's the raw video pulled directly from the upload folder:

https://diabeticteststrips.io/wp-content/uploads/freshbooks.mp4

Here's an image showing that there's no border when it's NOT in the JW Player:

https://snar.ly/x/httpsdiabeticteststrips.iowp-contentuploadsfreshbooks.mp4_2015-04-21_13-58-32.png

If you take the video to full screen, there is no black border.


So, why is there a big black border and how do I get the video to fill the player like it does when it's not in JW Player?

9 Community Answers

MisterNeutron

Best Answer 

Found it. In your style.css file, lines 284-291 is setting a max-width of 100% for the video element. That's colliding with JW Player's CSS. Get rid of that max-width, and you'll be fine.

View in conversation

Andrew

JW Player Support Agent  
1 rated :

This is likely an issue with styling within wordpress. We do see that certain media elements get changed/altered based on certain CSS styles. Checking the element and removing any inherited styles should help narrow this down.

MisterNeutron

Best Answer  User  
1 rated :

Found it. In your style.css file, lines 284-291 is setting a max-width of 100% for the video element. That's colliding with JW Player's CSS. Get rid of that max-width, and you'll be fine.

vincent

User  
0 rated :

I submitted a support ticket as well and Cooper was kind enough to run Developer Tools to determine that the <vide> and <object> tags were being styled by the Genesis Child Theme and instructed me to remove them.

I did and now it works perfectly.

Here's what Cooper said:

Hi Vincent Polisi -

I see that you have a style on your webpage that is being applied to the <video> tag. Please resolve this issue in your stylesheet and make sure that no styles are being applied to the <video> and <object> tags. This style was defined somewhere in your themes stylesheet. (screenshot attached)

Kind Regards,
Cooper Reid
Client Support Engineer, JWPlayer

Here's a screenshot of the style.css file in case anyone else has this issue. I simply deleted the object and video entries at lines 287 and 288 and it's working fine now.

https://snar.ly/x/style.css.png

vincent

User  
0 rated :

@MisterNeutron :

Thank you. We were posting at the same time.

Should the object and video tags be set to something different, deleted altogether like I did or just the max width element deleted?

Not sure what that does site-wide when you delete those settings for other non-JW Player related stuff.

MisterNeutron

User  
1 rated :

I would just remove the "video" element from that setting. If you're using JW Player to play any and all videos, you won't have any of your own <video> tags floating around, so you don't need to style them. Ditto for the "object" element - that one kicks in only if a visitor has to drop back to Flash, which is pretty rare these days (IE8, FF on WinXP). So leave the max-width for other elements (it looks like that's what you've done).

If you run into problems with non-JW Player content, you could restore the style.css rule to the way it was, but then except the JW Player video from it. Somewhere further down in the CSS:

.jwvideo video {
max-width: none;
}

vincent

User  
0 rated :

OK, so it appears those styling elements are there for a reason given that the theme is HTML5 compliant/responsive.

On my iPad, the JWPlayer is maintaining the size dimensions which take it outside the container.

So, how do I make the JWPlayer responsive?

MisterNeutron

User  
1 rated :

http://support.jwplayer.com/customer/portal/articles/1406644-making-jw-player-responsive

In short, you need to specify a width as a percentage, and then tell JW Player what the aspect ratio is. You DON'T do it by styling the <video> tag - you need to let the JW script take care of it. A live example:

http://misterneutron.com/JW6videoResponsive/

vincent

User  
0 rated :

God bless you, Son!

Worked like a champ!

MisterNeutron

User  
0 rated :

Glad it didn't turn out to be too painful. :)

This question has received the maximum number of answers.