Video player - Control video width/height

[Li, Cindy]

Hi Johnny,

You brought up a very good point.

While I was working on enlarging the videos using CSS. I noticed that with html5 <video> tag and non-html5 <object> tag for video playing, the "width" and "height" are tag attributes, rather than the styling property that can be directly controlled via CSS. The work-around is to place the <video> into a wrapper div, adjust the wrapper div's width/height meanwhile on the video itself, use "width: 100%, height: 100%" to stretch the video to fit the dimensions of the wrapper. By doing so purely in CSS (method 1), the video's auto-ratio-adjusting feature is no longer in use, the implementors have to take the video aspect ratios into account and provide proper width and height on wrapper div.

Method 2 is simpler in this extend since the ratio would be programmatically calculated.

If we decided on method 1, a good how-to documentation is certainly needed.

Another reason for method 2?! :)

Cindy

On 2012-03-01, at 12:36 PM, Johnny Taylor wrote:

Cindy,

My first instinct follows the logic of your first point; less is better. So I'd say number two. However, in the past, I've had issues with browsers implementing a consistent height's on video's (which could very well have been related to any number of things, the browser, Vimeo, or even WordPress, I suppose, I didn't have time to find out) when one isn't provided. How reliable are browsers at keeping correct aspect ratios with video?

Johnny

On 2012-03-01, at 12:21 PM, Li, Cindy wrote:

Hi,

We currently have 2 different opinions on how the implementors control the video width/height:

1. Via CSS. The video player scripts don't do anything. Instead, leave it to implementors to set the width or height via CSS. The advantage of using css power is quite obvious: 1. less code leads to less bugs; 2. more flexibility.

2. The video player component provides an API:

fluid.videoPlayer(".videoPlayer", {
    video: {
        width: 900,
        height: 800,
        ….
    }
});

With 2, The implementors provides only a width or a height, the browser takes care of video ratio. The width and height could be all provided but not preferable since the video ratio is not maintained in that case. With API, the implementors can easily specify what they want at writing the initialization of the video player without the worry to look after CSS.

Your thoughts please.

Thanks.

Cindy
_______________________________________________________
fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org>
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20120301/5cf8f4e6/attachment.htm>