Maximum width

[rafeblandford]

It would be helpful to add support for maximum width (i.e. specify a max width beyond which video should not be fluid, this helps prevent videos from getting too big).

I have tried to do this myself, but without success. I'm sure there's a way to do this, but not being a JavaScript Ninja could not work out where to make the changes.

For other looking at this - a work around which does work is, of course, to place the iframe is <p> / <div> and add a max-width css statement to that. However that requires extra markup, which seems a shame for a drop in solution.

[davatron5000]

The only way to do this would be as you described, apply a min/max width to apply yet another wrapper around the .fluid-width-video-wrapper. I'll think about and look at adding this in.

[rafeblandford]

Thank you. That gave me the clue I needed.

For the benefit of others wanting a quick fix.

Changing line 67 (added <div class="videocontent">)

$this.wrap('<div class="videocontent"><div class="fluid-width-video-wrapper" />').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");

I'm specifying the videocontent class in my css file, but I imagine you could add it to Javascript:

.videocontent {max-width:750px;margin:0 auto;}

I've put in the css file so I can optionally do media query changes. BTW My rationale for this is that some YouTube videos break down over 850px wide/ Not an issue unless you have a wide design. It also make it easier to adding in margins should that be your thing.

It's not great having two wrapping divs, but it does seem to work nicely in test I've done so far.

Thanks for FixVid.js - really appreciate it. Only responsive issue left is dealing with banner ads :)

[davatron5000]

Merging with #19

[nevergone]

This is merged and committed?