Introducing FitVids.js
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
How Do I Use It?
Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with fitVids()
.
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script>
This will wrap each video in a div.fluid-width-video-wrapper
and apply the necessary CSS. After the initial Javascript call, it’s all percentage-based CSS magic.
Currently Supported Players
YouTube | Y |
Vimeo | Y |
Blip.tv | Y |
Viddler | Y |
Kickstarter | Y |
Add Your Own Video Vendor
Have a custom video player? We now have a customSelector
option where you can add your own specific video vendor selector (mileage may vary depending on vendor and fluidity of player):
$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
// Selectors are comma separated, just like CSS
Note: This will be the quickest way to add your own custom vendor as well as test your player’s compatibility with FitVids.
Known issues
- Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.
Changelog
- 08.16.13 - v1.0.3 - 2.779k
- Optionally works with Zepto
- 09.02.11 - v1.0.2 - 2.376kb
- Added
customSelector
option
- Added
- 09.02.11 - v1.0.0 - 2.135kb
- Initial release
- Vimeo,YouTube, Blip.tv, Viddler, Kickstarter
Credits
@ChrisCoyier, @davatron5000, @TrentWalton, @raygunray