Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto height based on aspect ratio #771

Closed
xcambar opened this issue Oct 8, 2013 · 6 comments
Closed

Auto height based on aspect ratio #771

xcambar opened this issue Oct 8, 2013 · 6 comments
Labels

Comments

@xcambar
Copy link

xcambar commented Oct 8, 2013

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
Copy link
Member

heff commented Oct 8, 2013

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

@heff heff closed this as completed Oct 8, 2013
@mandersondesign
Copy link

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
Copy link
Contributor

albell commented Feb 3, 2014

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 do not force default 300x150 if no width/height found #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 heff mentioned this issue Feb 4, 2014
5 tasks
@heff
Copy link
Member

heff commented Feb 4, 2014

@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
Copy link

Has there been any progress on this since Feb 2014?

@mmcc
Copy link
Member

mmcc commented Jun 18, 2015

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

6 participants