PHPackages kraksoft/fitvids - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. kraksoft/fitvids ActiveComponent[Utility & Helpers](/categories/utility) kraksoft/fitvids ================ A lightweight, easy-to-use jQuery plugin for fluid width video embeds. v1.1.0-patch1(11y ago)0777MITJavaScript Since Jan 24Pushed 11y ago1 watchersCompare [ Source](https://github.com/kraksoft/fitvids)[ Packagist](https://packagist.org/packages/kraksoft/fitvids)[ Docs](http://fitvidsjs.com/)[ RSS](/packages/kraksoft-fitvids/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependencies (1)Versions (5)Used By (0) Introducing FitVids.js ====================== [](#introducing-fitvidsjs) A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates [the Intrinsic Ratio Method by Thierry Koblentz](http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/) to achieve fluid width videos in your responsive web design. How Do I Use It? ---------------- [](#how-do-i-use-it) Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with `fitVids()`. ``` $(document).ready(function(){ // Target your .container, .wrapper, .post, etc. $("#thing-with-videos").fitVids(); }); ``` 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 --------------------------- [](#currently-supported-players) YouTubeYVimeoYBlip.tvYViddlerYKickstarter YAdd Your Own Video Vendor ------------------------- [](#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 ------------ [](#known-issues) - Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay. Changelog --------- [](#changelog) - *08.16.13 - v1.0.3 - 2.779k* - Optionally works with Zepto - *09.02.11 - v1.0.2 - 2.376kb* - Added `customSelector` option - *09.02.11 - v1.0.0 - 2.135kb* - Initial release - Vimeo,YouTube, Blip.tv, Viddler, Kickstarter Credits ------- [](#credits) @ChrisCoyier, @davatron5000, @TrentWalton, @raygunray ### Health Score 31 — LowBetter than 66% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community16 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 53.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 4 Last Release 4169d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/44c3a94513df3456aa4057c302576e5f4d20e07c74b9b8bf78daca40d420334c?d=identicon)[kraksoft](/maintainers/kraksoft) --- Top Contributors [![davatron5000](https://avatars.githubusercontent.com/u/42218?v=4)](https://github.com/davatron5000 "davatron5000 (32 commits)")[![chriscoyier](https://avatars.githubusercontent.com/u/69156?v=4)](https://github.com/chriscoyier "chriscoyier (10 commits)")[![kedrap](https://avatars.githubusercontent.com/u/228109?v=4)](https://github.com/kedrap "kedrap (6 commits)")[![elliotttf](https://avatars.githubusercontent.com/u/447151?v=4)](https://github.com/elliotttf "elliotttf (2 commits)")[![cbumgard](https://avatars.githubusercontent.com/u/89447?v=4)](https://github.com/cbumgard "cbumgard (2 commits)")[![mohnish](https://avatars.githubusercontent.com/u/138171?v=4)](https://github.com/mohnish "mohnish (1 commits)")[![quayzar](https://avatars.githubusercontent.com/u/1156664?v=4)](https://github.com/quayzar "quayzar (1 commits)")[![adamfairholm](https://avatars.githubusercontent.com/u/298239?v=4)](https://github.com/adamfairholm "adamfairholm (1 commits)")[![sstarr](https://avatars.githubusercontent.com/u/18957?v=4)](https://github.com/sstarr "sstarr (1 commits)")[![emiluzelac](https://avatars.githubusercontent.com/u/1784526?v=4)](https://github.com/emiluzelac "emiluzelac (1 commits)")[![flynfish](https://avatars.githubusercontent.com/u/253936?v=4)](https://github.com/flynfish "flynfish (1 commits)")[![Krinkle](https://avatars.githubusercontent.com/u/156867?v=4)](https://github.com/Krinkle "Krinkle (1 commits)")[![lerouxb](https://avatars.githubusercontent.com/u/69737?v=4)](https://github.com/lerouxb "lerouxb (1 commits)") --- Tags fitvids ### Embed Badge ![Health badge](/badges/kraksoft-fitvids/health.svg) ``` [![Health](https://phpackages.com/badges/kraksoft-fitvids/health.svg)](https://phpackages.com/packages/kraksoft-fitvids) ``` ### Alternatives [fullcalendar/fullcalendar Full-sized drag & drop event calendar 20.5k374.8k4](/packages/fullcalendar-fullcalendar)[eternicode/bootstrap-datepicker A datepicker for Bootstrap 12.7k548.1k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker Date/time picker widget based on twitter bootstrap 7.2k496.2k9](/packages/eonasdan-bootstrap-datetimepicker)[trentrichardson/jquery-timepicker-addon Adds a timepicker to jQueryUI Datepicker. 2.6k70.5k](/packages/trentrichardson-jquery-timepicker-addon)[jonthornton/jquery-timepicker A javascript timepicker plugin for jQuery inspired by Google Calendar. 1.9k41.5k1](/packages/jonthornton-jquery-timepicker)[grimmlink/bootstrap-filestyle jQuery customization of input html file for Bootstrap Twitter http://markusslima.github.io/bootstrap-filestyle/ 71410.6k](/packages/grimmlink-bootstrap-filestyle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)