Video.js: Auto height based on aspect ratio

[xcambar]

Hi,
Hers is a description of what I'm trying to achieve:

• videos have a flexible width based upon the dimensions of the container.
  
  
  
  • => That's easy with width: auto
  
  
• the height of a video is automatic based upon the aspect ratio and the width (pretty much like a native tag would do)
  
  
  
  • No idea how to do it
  
  

I've been playing with various combinations of width and height, be it auto or 100%, and could not get a good result

Is there an option I could set to achieve this or a method I could call to know the dimensions of the video source, so I can compute myself the correct height?

Example

By writing something like this:

<div class="container">
  <video
    data-setup='{}'
    id="123"
    class="video-js vjs-default-skin"
    controls
    height="auto"
    width="auto"
    preload="auto">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></source>
  </video>
</div>

If my video is 800*600 and .container has a width of 400px, the height of the videojs 'component' should be 300px.

Is this something that can be achieved ?

Note: This may be related to #359

[heff]

We really need a guide for this (if anyone wants to put on together).

It's gonna take some javascript to make that happen. We do it on the videojs.com homepage and you can see the code here:
https://github.com/videojs/videojs.com/blob/master/contents/js/scripts.js#L72

[mandersondesign]

Would there be any way that this could be achieved with FitVids? A customSelector after the video is loaded does not seem to work. Or could this be done naturally in the library?

Thanks!

[albell]

First, sorry for the long post, but this stuff is hard to summarize concisely.

Here's another approach that uses intrinsic ratios, aka percentage padding:

http://jsfiddle.net/alexbell/Zs5WB/

This is just a proof of concept. And it doesn't currently work with flash as written because arbitrary data-* attributes aren't copied over onto the flash object. But this approach requires less adjustment to the existing codebase. And it's also nice because the video wrapper has height in layout (from the percentage padding) even before the video loads, which is good for layout performance.

This should really not be a bolt-on widget, but part of the main script, with autoHeight as part of the main options object. I'm happy to fork, submit a pull request, and even write the 'responsive guide' for a 4.4 if we can agree on an approach.

A few basic points:

• This functionality is _essential_. It's false advertising to have the fishes video work responsively on the home page and not in the script :)
• Using js to listen for layout changes (like on the current homepage) is dicey. E.g. what if new layout-hanging elements load into the page via ajax, but there's not a resize? Trouble. Even just in terms of the resize event, we realistically either need to throttle/debounce the resize handler, which creates its own layout jank, or let the resize event run amok, which can really overact and freeze the browser. It's both cleaner and more performant if the author can declare the aspect ratio once, in markup, and then all subsequent sizing is pure CSS.
• height="auto" is questionable as an API pattern. The spec says the dimensions must be non-negative integers. I said this once in #359 and I'm sticking with my story. Please no keywords on native element attribute dimensions; it's misleading. This should not be the trigger for 'autoHeight' mode. It needs to be put into the options object.
• Let's please not set _any_ numeric dimensions to override in CSS when a player is in "autoHeight" mode. I would rather remove the !importants from my suggested stylesheet addition. It makes me cringe:

.video-js.auto-height {
height: 0 !important;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
max-width: 100%;
width: auto !important;
}

BUT...

One downside of this approach is that the author needs to know the aspectRatio of the video in advance. This kind of sucks. Authors will want to be able to load responsive videos of unknown aspectRatios. One way around that is the pure CSS approach I advocate over in #359. But that approach requires unlocking the flash object from a 150pixel height when height isn't declared. And it forces layout jank as the videos load.

Another, possibly better solution using instrinsic ratios, but still leaving the door open to videos of unknown dims, could be that if autoHeight is set to an empty string, instead of a number or ##:## the aspectRatio is derived from the video metadata when it loads, and only then does the padding-top get applied to the container as a callback.

Thoughts?

[heff]

@baloneysandwiches, added #982 to continue to track this. Your approach is a great start, and I think we can build on it pretty easily to make something that works for all techs.

[SimonEast]

Has there been any progress on this since Feb 2014?

[mmcc]

@SimonEast Yep! Thanks for the reminder, this should be closed now that #1952 is pulled into master.