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.
Include jQuery 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.
YouTube | Y |
Vimeo | Y |
Blip.tv | Y |
Viddler | Y |
Kickstarter | Y |
more? | ? |
- 09.02.11 - v1 - 2.135kb
- Initial release
- Vimeo,YouTube, Blip.tv, Viddler, Kickstarter
@ChrisCoyier, @davatron5000, @TrentWalton, @raygunray