Keep correct Aspect Ratio in Full Screen

I would like to be able to maintain aspect ratio of videos in full screen mode using the built in FlowPlayer. The videos are currently distorting to fit the height of the screen, but I just want a black bar at the top and bottom.

I tried editing 'wpvp_flowplayer.js' and addded 'scale:fit' but unfortunately this seems to change the player controls (cannot use ESC key and get back to the website) and it also changes it to use the HTML5 version.

Can you tell me which PHP file I can add scale:fit to, so the player looks the same.

 

Unfortunately there isn't a way to do that with our theme unless you custom code something up. Sorry.


Thanks & Regards
Gourav Shrivastava

 

As this theme is being sold as a solution to providing video content, then surely you would expect to have some control of how videos are displayed, it is the main use of this theme.

It must be a fairly simple process for you guys to add an option to 'keep the aspect ratio' as the original using scale:fit option.

Most users will not want their videos stretched to fit the full height of the screen, but would prefer the content to fit as originally produced.

 

Hello ubishere,

The possible solution is instead of maintaining aspect ratio in full screen, you can show the original video size in full screen, For this go to functions >lib > js > wpvp_flowplayer.js
and replace current code

Code:

 jQuery(window).load(function(){
var wpvp_swf_location = object_name.swf;
flowplayer("a.myPlayer", ""+wpvp_swf_location+"", { clip:{ autoPlay:false, autoBuffering:true }, plugins: { controls: { volume: true } }});
});

With code given below

Code:

jQuery(window).load(function(){
var wpvp_swf_location = object_name.swf;
flowplayer("a.myPlayer", ""+wpvp_swf_location+"", { clip:{ autoPlay:false, autoBuffering:true, scaling: 'orig'
}, plugins: { controls: { volume: true } }});
});
 

Thanks & Regards
Gourav Shrivastava

 

Thanks for taking the time to post back...

I changed your code to use scaling: 'fit' rather than scaling: 'orig'

The code I found elsewhere online had said to use scale:fit but that didn't work correctly, so I used your amended version scaling: 'fit' (with hyphens) and now it works.


Thanks

Below is the code to use if you want to have the video scale to fill the entire width of the screen, but keep the correct height (black bars at top and bottom).

Code:

jQuery(window).load(function(){
var wpvp_swf_location = object_name.swf;
flowplayer("a.myPlayer", ""+wpvp_swf_location+"", { clip:{ autoPlay:false, autoBuffering:true, scaling: 'fit'
}, plugins: { controls: { volume: true } }});
});