Skip to content

Use intrinsic ratio (like fitvids.js) for scaling instead of setting inline styles with javascript #666

Open
michaek opened this Issue Nov 24, 2012 · 5 comments

4 participants

@michaek
michaek commented Nov 24, 2012

"100% mode" does work for width, but even then it seems like it shouldn't be necessary. The intrinsic ratio approach seems both cleaner (from a code perspective) and more supportive of responsive styling. (See https://github.com/davatron5000/FitVids.js)

The case that's not covered by the current "100% mode" is if you're using CSS in addition to width: 100%: for example, max-height. The only thing we're currently taking into account onresize is width - the fact that other styles could also affect the layout is a good argument for putting control of scaling in the hands of CSS.

I've been looking through the code, and I'll see if I can provide some commits to achieve this. If anyone with more familiarity with the code and its use cases wants to tell me why it's a bad idea, I'm all ears!

@ron666
ron666 commented Nov 26, 2012

I don't think is a bad idea; JWPlayer provides stretching modes and that's an attractive feature. I've been trying to work on that, I can help you if you can help as well to achieve this feature.

@johndyer
Owner

I'm always happy to make it better! Feel free to issue a pull request if you've figured it out.

@ron666
ron666 commented Nov 26, 2012

I've worked on this creating a plugin with jQuery Widget Factory and I can share it with you so you can give me feedback. I still need to get some things done before doing that but if you are interested let me know so I can at least pull the first version of the plugin

@michaek
michaek commented Nov 27, 2012

Hi, guys. Sorry to leave you hanging on this. Delving into this is a priority for me, but I need to focus on other stuff for the remainder of this week. I'll have some feedback (and hopefully some commits) soon.

Based on my naive reading of the code, I'd want this approach to refactor out most of the set*Size methods, because those should be determined by CSS and native browser rendering - however, I need to make sure that's practical before I can assume it's a good approach.

@JeffreyATW

Looking forward to this! The current max-width: 100% setting doesn't work with any version of IE, even 10. That's because IE (correctly?) returns the calculated pixel style instead of a percentage. Can't find any way around it, but this might be what we need.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.