I'm using flowplayer for a website and it automatically chooses between the HTML5 and flash version depending on the browser capabilities. The problem I have is that when is Flash the video stretches to use the whole player, but in HTML5 is displayed correctly.
Here is how is showing in Flash (Firefox)

And here in HTML5 (Chrome)

Is it possible to fix that issue?
I'm using this code in HTML:
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf" class="flowplayer is-poster" data-ratio="0.416">
<video preload="none">
<source src="http://mysite/video.mp4">
</video>
</div>
I just managed to replicate the problem in jsFiddle
http://jsfiddle.net/xtrPm/
It turns out that buried waaaay deep within the settings is this:
http://flowplayer.org/docs/setup.html#config-options
flashfit: v5.3 whether video aspect ratio in Flash non-fullscreen mode is preserved. Only set this to true if the container's dimensions do not fit the video's aspect ratio, e.g. for playlists with clips of different aspect ratio. Note that setups with dynamic container resizing require the container to be of the same ratio as the video. The option also cannot deal with anamorphic videos as Flash is agnostic of a video's display aspect ratio.
http://jsfiddle.net/L2Exb/11/
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf"
class="flowplayer is-poster" data-flashfit="true">
<video preload="none">
<source type="video/mp4" src="http://encodable.com/uploaddemo/files/video/butterfly..mp4" />
</video>
</div>
I use this method to fix this problem.
clip: {
url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
scaling: 'fit', // this line make it work
provider: 'hddn'
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With