JavaScript
Article

Flowplayer Dynamic Video Size

By Sam Deering

This is how you could go about making the Flowplayer video size dynamic. This could be handy if you have the video playing in a window which can be resized, or if you wish to play different variable bitrates for the video which operate at different resolutions usually at a scale ratio of 16:9 (width:height).

Related Posts:

Fixed Size

360-640-res

Fit Window Res

fit-window-res

jQuery Code

//change size
$('.change-size-btn').live('click', function(e)
{
    e.preventDefault();

    //find the video id
    var videoId = $(this).parents().find('.fms').attr('id');

    //vidDisplayType = fixed, fit, fullscreen
    var btnElem = $(this),
        vidElem = $('#'+videoId).find('object'),
        widgetContainer = $('#'+videoId).parents('.video-container'),
        vidDsplayType = btnElem.attr('vidDisplayType'),
        width, height;

    //FIXED
    if (vidDsplayType == 'fixed')
    {
        //get new fixed dimensions
        height = btnElem.attr('vidHeight'),
        width  = btnElem.attr('vidWidth');

    }
    //FLUID
    else if (vidDsplayType == 'fit')
    {
        //get widget dimensions
        height = widgetContainer.height(),
        width  = widgetContainer.width();
    }

    //RESIZE VIDEO
    console.log('changing video size to ' + width + ' by ' + height + '...');
    // vidElem.height(height).width(width);
    vidElem.height(height).width(width).fadeIn("slow", function()
    {
        console.log('done.');
        $f().getScreen().animate({ "width" : width, "height" : height}, 500);
    });
}

HTML

Video size:

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.