Adding maxWidth variable that adds wrapper, retains original max width/height #19

wants to merge 8 commits into


None yet

andyadams commented Nov 15, 2011

References issue #10. When the maxWidth option is set to true, an extra container is added that limits the size of the video to the originally-specified dimensions.

My text editor also strips out trailing whitespace, so there's a bunch of that removed as well :).

P.S. Chris, at WordCamp SF I totally ditched mid-talk upstairs to come and hear yours. It was awesome.

The maxWidth functionality is really nice, but in the cases where I've tried to use it - it has proved something I've just had to put back to false. This is because stopping the video being 100% width, means that the video isn't centered within it's parent division (and hence looks completely ugly on the page).
I can't really think of any obvious ways to fix this though. Would I be right in saying that it would require some heavier Javascript to center within the parent with a max-width (or am I just being stupid)?


andyadams commented Dec 1, 2011


If you wanted a video to be centered, you could add some styles to make it that way - maybe auto margins? I'm not a CSS master, but it would seem that this would be best handled by simply styling appropriately.

The use case I wrote this for is when someone really wants an embedded video to be a certain width - without my fix, the video would automatically become 100% width and nothing could be floated next to it, for example.

@andyadams Unfortunately doing a simple "margin: 0 auto" requires a fixed width (you can't use min or max-width), hence I can't find any easy way to center the video. I agree that the maxWidth addition is very good for floating and stuff - but it's a shame that there is no easy way (that I can see) to center the video, as many people seem to use FitVids.js to put videos in content division (in which you'd want it to be centered).

EDIT: Actually, coming back to this, using automatic margins with a max-width seems to work fine :P

rbdcti and others added some commits Jan 13, 2012

* Adds settings.maxWidthDefault, which allows you to have a max width…
… for iframes that don't have a width= value set

* Fixes invalid HTML bug from parent fork at Krinkle/FitVids.js@ec9b51d
Merge pull request #1 from rbdrbd/master
adds maxWidthDefault and fixes bug from parent fork

mhulse commented Apr 18, 2012

Hi! Love this plugin. Just curious, has there been any movement on this patch?


andyadams commented Apr 21, 2012

None from me - @joesavage ?

This is a great idea. It really should be the default behavior, IMO. It's the same way we treat responsive images, particularly when they are floated with text.

👍 from me. It'd be nice to not expand the video to larger than its natural dimensions. That ends up looking blurry.


davatron5000 commented Nov 27, 2013

So I'm here, 2 years later, combing through PRs. 😿

I'd be interested in getting this into (the mythical) FitVids 2.0, but I wonder if could be done with just one setting instead of two:

maxWidth: false // default, do not wrap
maxWidth: true // set max-width to originalWidth
maxWidth: 900 // set max-width to 900px


@davatron5000 davatron5000 referenced this pull request Jan 8, 2014


Instagram Video Embeds #153

I think it only needs to be a single option.

palewire commented Mar 3, 2014


This was referenced Apr 1, 2014

Thimp and others added some commits Dec 22, 2014

Updated maxWidth version of FitVids to 1.1
The current version of the maxWidth setting 'extension' was outdated. This is the updated version with the latest code of FitVids.
Merge pull request #2 from Thimp/patch-1
Updated maxWidth version of FitVids to 1.1

I also think this should be the default behaviour. Other than that, the plugin works very nicely. Great job!

rchrd2 commented Jul 7, 2015

👍 This fork worked for me

fabianfetik added a commit to fabianfetik/FitVids.js that referenced this pull request Oct 5, 2015

shennan commented Nov 16, 2016

@davatron5000 Any movement on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment