-
Notifications
You must be signed in to change notification settings - Fork 7.5k
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
Comments
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: |
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! |
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 A few basic points:
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 Thoughts? |
@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. |
Has there been any progress on this since Feb 2014? |
@SimonEast Yep! Thanks for the reminder, this should be closed now that #1952 is pulled into master. |
Hi,
Hers is a description of what I'm trying to achieve:
width: auto
I've been playing with various combinations of
width
andheight
, be itauto
or100%
, and could not get a good resultIs 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:
If my video is
800*600
and.container
has a width of400px
, the height of the videojs 'component' should be300px
.Is this something that can be achieved ?
Note: This may be related to #359
The text was updated successfully, but these errors were encountered: