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
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.
<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>