Last week, Trent Walton tweeted about the frustration of getting standard video players to work in a responsive design:
Trent is right. It’s deceptively difficult to make videos fluid and responsive. I almost lost all my hair getting it to work on Do Lectures. On one hand, the HTML5 video element is super easy to make responsive: video { max-width: 100%; height: auto; }. On the other hand, if you want to do something basic like embed a video from YouTube or Vimeo (that has a flash fallback) you can set the width: 100%; but the height stays the same breaking the aspect ratio… until now.
After some interstate brainstorming and coding with Chris Coyier, we came up with a solution. Mr. Walton, we’re here for our check.
Introducing FitVids
FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It currently supports the major video vendors: YouTube, Vimeo, Blip.tv, and a couple outliers.
How it works
The plugin is based on Chris’ pre-exising work on fluid videos and the Intrinsic Ratio method suggested by Thierry Koblentz (ALA #284). With these gems of knowledge combined with my ability to only make tiny jQuery plugins, getting your videos do aspect ratio-based resizing is now as easy as targeting your .container, .post, etc. with FitVids.
$("#thing-with-videos").fitVids();
It’s that easy! Best part, there’s very little Javascript happening. After the initial setup, it’s all percentage based resizing with just CSS.
You can fork it on Github to dig in deeper into how it works. We’d love your feedback.
FitVids happily joins the Paravel family of easy-to-use tools for radical web: Lettering.js and FitText. If you use FitVids or any of these plugins on a something, let us know! We love to seeing this stuff in action.
Updates: Plugins and Modules
Absolutely amazed that people are taking this and running with it. Thanks, y’all.
Also, we’ve made some updates to FitVids and you can add your own custom video vendors and test out other players. If this interests you, read more here.
kewl!
Really awesome, I was waiting for something just like this! Another great plugin from paravel.
This is absolutely brilliant. You guys are absolutely brilliant! I guess the two go hand in hand, huh. Thank you so much for contributing awesomeness to the internets. :)
Superb work guys, this looks like a brilliant way to get responsive videos working just right.
amazing! Thanks guys.. this is really useful! great work!
Awesome work, dudes. Just implemented it on my site along with FitText. You can see a demo here: http://ryanmerrill.net/post/9355364787
Thanks a bunch.
WONDERFUL! Nice Work.
This is awesome, guys! But did you really put a video on this page and NOT use your own js for it? Booooooo.
haha. i get it. i need to make my site responsive. i get it :D
Haha I just noticed that. :P
I have using this method:
http://webdesignerwall.com/tutorials/css-elastic-videos
but I will give your script a go.
Yup! It’s basically doing the exact same thing only automated with a few less divs and can fit any aspect ratio (that one is just 16:9). Good luck and let us know how it turns out.
This is a really cool script, I don’t usually share videos on my blog, but this is definitely a reason to start. :)
Does the script add a and a tag into the of your website, isn’t it suppose to add the div before the iframe and the styles into the head?? How does this work, why a div in the head?
That was Chris’ suggestion so I’ll have to confer with him on the details, but I believe that DIV is just so we can safely inject the STYLE tag in the HEAD across browsers. I’ll doublecheck on that.
The IFRAME is wrapped in a DIV.fluid-width-video-wrapper, which is controlled by the injected styles.
Here’s the rub: http://www.thecssninja.com/javascript/noscope
That show be a ( div ) tag with the class “fit-vids-style” and a (style)
I’ve wrapped up a minified version of the script in (my first) WordPress plugin that hooks onto the
.hentryselector: FixVids.js for WordPress.Responsive Goodness all around :) Great work, Dave
Great work I just finished an integration of responsive fluid width video embeds from youtube on Drupal 7 site
Fantastic plugin, really useful.
I’ve made a simple Drupal module to implement it: http://drupal.org/project/fitvids
Is there a tutorial for usage?
The readme file that’s included with the FitVids downloads should get you setup. There’s also a tests.html that shows an example setup of a few working services.
https://github.com/davatron5000/FitVids.js
Hey Dave thanks for the link up. Super glad to help out. I’ll be updating the WordPress plugin here soon to support the new version of FitVids.
Awesome jQuery plugin!
Hey Dave, cool new responsative site :)
I’ll be using fitvids on a project very soon, I’ll let you know how it turns out.
Big Love Simon
That’s great to hear, Simon. I’m a big fan of your work.
Here ya’ are dude http://fosterprops.com/
I must say the fitvids plugin was a breeze to use, especially to someone as javascriptly challenged as me :) Well done on a really useful wee plugin sir :)
@davatron5000 Thank you so much for this. I dropped one of the videos from your tests.html into a new Drupal block, added the minimal CSS and voila!. There it is. I put it in Drupal 7 with the responsive theme, Omega.
Wow! WOw! WOW!
Thanks again.
Goed dat je dit geplaatst hebt!. Heb het gelijk doorgestuurd naar een neef, hij was hiernaar opzoek! Mooie site trouwens!
This is pretty much witchcraft… works a dream. Cheers guys!
Looks good. Now, I just trying to make it work with video content added to the DOM dynamically via jQuery’s .load method.
Causes bizarre errors for me in IE9 when using youtube’s iframe embeds (though it really looks like a problem with their code, not fitvids directly). Claims “Math is not defined.” May have something to do with the floating point dimensions and YT’s iframe resize code.
Here’s a fiddle:
http://jsfiddle.net/YnFsn/
Looking into it, but you may have more insight. Works like a charm with all other browsers: brilliant stuff.
Hrm. I created an issue over on github to track this: https://github.com/davatron5000/FitVids.js/issues/26
It could be a million things. Math is a standard part of any javascript engine, so it sounds like a larger problem. It could also be related to compatability mode. Will investigate.
Now, how can I get this to work in Tumblr?
Howdy bearded one! I’m in-love with the idea behind fitvids. It makes me happy.
I’m actually working on a video tutorial site that I would love to make responsive, and have chosen Wistia.com as my video hosting thinger— mostly because they have a ‘domain restriction’ setting that will act as a DRM of sorts…
Anyhoo, I would love it if fitvids worked with Wistia videos.
Any ideas?
@Alan You may want to open an issue on Github just so it gets tracked. Have you tried the customSelector option? If not, that’d be where I start.
Thanks! I’ll post on Github.
I am also getting a nasty JavaScript error in IE9 like Drew above. Has anyone managed to figure out what might be causing this?
I am interested in using Fitvids in Joomla, is there a suitable plugin or can you advise of a method.
Impressive work!
I love it!
I’m just a themer and using drupal with the omega subtheme. could someone walk me though using this with the module? really need to add it as a block.
thanks.