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

one place to find all answers about black bars, stretching, height and aspectratio

Hi, We need to play videos of a variety of sizes / dimensions, with in the area on our page we've designed, or when going full page with the player. Our design is responsive, so the player must adjust when the page is resized.

We need a tutorial that goes into more detail than http://support.jwplayer.com/customer/portal/articles/1406644-making-jw-player-responsive

for cases where the video as recorded does not fit the aspect ratio of the div. We need to know
1) How to detect the aspect ratio of the video file or stream at run time.
2) When we determine the aspect ratio of the video is wider and shorter than our div, how to configure the player to enlarge the video, center the video within the div, and crop the video on left and right if needed, so the div is completely filled. We are aware that some of the video will not show as a result.

6 Community Answers

Up Down

George

JW Player Support Agent  
0 rated :

Hi,

You need to configure your player as a fixed size and during setup apply width,height 100%.

<!DOCTYPE html>
<html>
<head>
<title>Responsive</title>

<script src="http://content.jwplatform.com/libraries/7J1pdIcs.js"></script><style>

#child_logo{
display: none;
}

</style> </head> <body> <div id="left" style="position:fixed;left:0;top:0;bottom:0;width:200px;background:#666666"></div> <div id="right" style="position:fixed;right:0;top:0;bottom:0;width:200px;background:#666666"></div> <div id="bottom" style="position:fixed;right:0;height:200px;bottom:0;left:0;background:#aaaaaa"></div> <div id="parent" style="position:fixed;right:200px;top:0;bottom:200px;left:200px;background:#222222">

<div id="child"></div>
<script> var video = jwplayer("child"); video.setup({ file: "http://content.jwplatform.com/manifests/s1BX6sJr.m3u8", width:"100%", height:"100%", }); </script>

</div> </body> </html>

Up Down

Michael Williams

User  
0 rated :

Hi George, thanks for the suggestion. Are we saying that by configuring the player as fixed size, that we don't need to know the aspect ratio of the stream or the VOD? Also, will this still be responsive?

Thank you

Up Down

George

JW Player Support Agent  
0 rated :

Hello Michael,

If you send over a test page that isn’t working up to par for you I’ll have an easier time explaining what may be wrong. But yes, by putting fixed you can override the width and height with percentages that will make the player responsive. Reason you don’t want the player library to be responsive by default is that it will always require the aspect ratio.

Up Down

Michael Williams

User  
0 rated :

Hi George, we don't have a test page, only the current real page. Is there a way to send you a link privately?

Up Down

Michael Williams

User  
0 rated :

I'd need to probide you login info

Up Down

George

JW Player Support Agent  
0 rated :

email support at jwplayer. We’ll take it from there

This question has received the maximum number of answers.