CODEWITHSUNDEEP
jwplayer
smohadjer
smohadjer

Reputation: 882

Why does JWPlayer show black bars above and below videos?

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
});

Upvotes: 2

Views: 2010

Answers (2)

Shane Rowatt
Shane Rowatt

Reputation: 2095

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>

Upvotes: 0

emaxsaun
emaxsaun

Reputation: 4201

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'
});

Upvotes: 2

Related Questions