Prevent fitVids from englarging videos - responsive-design

Question

I have fitVids working on my site. However, I'm wondering if it is possible to prevent fitVids from enlarging a video beyond its defined height/width. For example, if a video is 600px wide, but the container is 800px, fitVids enlarges the video to 800px wide and it is blurry. I'd only like fitVids to shrink the video when the container shrinks for smaller devices. Is that possible?
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});

Answer 1

helgatheviking's solution constrains the width of the video, but not the height. If your container is wider than the video, you end up with a really tall, letter-boxed video. The height is easy to fix, using the same technique to constrain the width. But, there's a third variable.
fitVids wraps the iframe in a div, with the class "fluid-width-video-wrapper", and sets padding-top equal to the aspect ratio of the video. Even if height and width are constrained, the fluid-width-video-wrapper will still be as tall as the video could be, if it didn't have a max-height. So, you end up with a bunch of white-space below the video.
Rather than set all three values (width, height, and padding), you can simplify everything by wrapping the iframe in a div with a max-width, before initializing fitvids.
var vidFrame = $('#fitvids_container').find('iframe');
var vidWidth = vidFrame.attr('width');
if (typeof vidWidth !== undefined) {
// Wrap the iframe in a Div with max-width defined
vidFrame.wrap('<div style="max-width:' + vidWidth + 'px;"></div>');
}
// Initialize fitVids
$('#fitvids_container').fitVids();
Like helgatheviking's solution, if you have more than one video per page, you'll have to calculate the max-width for each video.

Answer 2

One option is to make a small modification to the fitvids code which checks for a data-maxwidth attribute and if found wraps a div with a max-width style to limit the resized iframe.
This allows each videos max width behaviour to be specified independently.
For example. Add the data-maxwidth attribute to the iframe.
<iframe width="560" height="315" data-maxwidth="560" src="https://www.youtube.com/embed/L-UIiRlydow" frameborder="0" allowfullscreen=""></iframe>
Then add the following code snippet to the fitvids.js file, at the end of the $allVideos.each function, just after $this.removeAttr('height').removeAttr('width');
if ($this.data("maxwidth"))
$this.parent('.fluid-width-video-wrapper').wrap('<div></div>').parent().css('max-width', $this.data("maxwidth"));

Answer 3

It simple!
Assuming "thing-with-videos" is the ID of the wrapper on which you are calling .fitvids()
So just set the max width css property for this container.
Example:
#thing-with-videos {
max-width: 600px;
margin: 0px auto;
}
This wont let your video width go beyond 600px. Margin property will center your video container.
Live Edit Demo -
http://bitconfig.com/fit-vids/bitconfig_fitvids.html
Set your custom width in the "Video container width" textbox and watch the preview!
-Patrick

Answer 4

Patrick's answer eventually made me realize that I could put a max-width on the iframe itself.
#fitvids_container {
max-width: 600px;
}
#fitvids_container iframe {
max-width: 500px;
}
However, if you were using a lot of videos (of different sizes), you might want to do this dynamically. With jQuery we can get the width from the iframe attribute and make it a max-width style rule. This only works if you've included the width attribute in your embed code though. This is a single example, but could be adapted to an .each() loop or at least renaming the container div to a class.
var width = $('#fitvids_container').find('iframe').attr('width');
if (typeof width !== undefined) {
$('#fitvids_container').find('iframe').css('maxWidth', width + 'px');
}
See my example: http://jsfiddle.net/Qd4FW/2/