Why does JWPlayer show black bars above and below videos?

2
votes

JWPlayer 6 shows black bars above and below video when video is played on iPhone or android smart phones in portrait mode, but not in landscape mode! Same thing happens on iPad when video player width is reduced to 320px or less. The video I used for testing has an aspect ratio of 16:9 and meta data width and height of 640, 360.

Why is this happening and more importantly how can the bars be removed without stretching/cropping the video that using different "streching" values ("fill", "exactfit", "none") cause?

Link: http://jsfiddle.net/hRAKQ/17/

JS code:

var jw = jwplayer("test").setup({
    file: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
    image: "http://lorempixel.com/320/180/sports/7/",
    width: 320,
    height: 180,
    autoplay: false
});
2
jwplayer

2 Answers

2
votes

This code will work:

var jw = jwplayer("test").setup({
    file: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
    image: "http://lorempixel.com/320/180/sports/7/",
    width: 320,
    height: 180,
    autoplay: false,
    stretching: 'exactfit'
});
0
votes

I have a similar issue. Though the black bar only appears at the bottom and only when the play button is clicked. I got mine to work with the css hack of setting the font-size to zero on the video div element. So in your fiddle example it would be like this 

<div id="test" style="font-size: 0"></div>