PHPackages                             uninhabited/fitvids.js - 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. uninhabited/fitvids.js

ActiveNpm-asset

uninhabited/fitvids.js
======================

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

127.1k↓16.7%1HTML

Since Oct 19Pushed 5y agoCompare

[ Source](https://github.com/uninhabited/fitvids.js)[ Packagist](https://packagist.org/packages/uninhabited/fitvids.js)[ RSS](/packages/uninhabited-fitvidsjs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)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.tvY\*ViddlerY\*Kickstarter Y\*`*` means native support for these may be deprecated. If your video platform is not currently supported, try adding it via a `customSelector`...

Add 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.

Ignore With Class
-----------------

[](#ignore-with-class)

Have a video you want FitVids to ignore? You can slap a class of `fitvidsignore` on your object or container and your video will be displayed as it is defined.

If you'd like to add a custom block to ignore FitVids, use the `ignore` option.

```
  $("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
  // Selectors are comma separated, just like CSS
```

Target Videos embedded without classes or containers
----------------------------------------------------

[](#target-videos-embedded-without-classes-or-containers)

Customers/clients will occasionally add a video to a general content area or article and this may be without a class or container that you're targetting. A solution to this is to target the parent of videos, using something like the below;

```
  $('iframe[src*="youtube"]').parent().fitVids();
  // You can change the selector to suit potential video providers, or chain them if your customer is likely to use more than one provider
```

By targetting the iframe/embed parent you can then dynamically add in the fitVids special sauce on the fly without needing to know the container ahead of time.

Known issues
------------

[](#known-issues)

- Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity27

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity32

Early-stage or recently created project

 Bus Factor1

Top contributor holds 58% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/41075a7b3b00d5147f43c2ec74c5cfab12d98c338f0205c15320c95e072d8bf1?d=identicon)[radimklaska](/maintainers/radimklaska)

---

Top Contributors

[![davatron5000](https://avatars.githubusercontent.com/u/42218?v=4)](https://github.com/davatron5000 "davatron5000 (51 commits)")[![chriscoyier](https://avatars.githubusercontent.com/u/69156?v=4)](https://github.com/chriscoyier "chriscoyier (10 commits)")[![arthurvr](https://avatars.githubusercontent.com/u/6025224?v=4)](https://github.com/arthurvr "arthurvr (5 commits)")[![radimklaska](https://avatars.githubusercontent.com/u/603345?v=4)](https://github.com/radimklaska "radimklaska (5 commits)")[![cbumgard](https://avatars.githubusercontent.com/u/89447?v=4)](https://github.com/cbumgard "cbumgard (2 commits)")[![andyunleashed](https://avatars.githubusercontent.com/u/1426079?v=4)](https://github.com/andyunleashed "andyunleashed (2 commits)")[![elliotttf](https://avatars.githubusercontent.com/u/447151?v=4)](https://github.com/elliotttf "elliotttf (2 commits)")[![lerouxb](https://avatars.githubusercontent.com/u/69737?v=4)](https://github.com/lerouxb "lerouxb (1 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)")[![dboulet](https://avatars.githubusercontent.com/u/208615?v=4)](https://github.com/dboulet "dboulet (1 commits)")[![emiluzelac](https://avatars.githubusercontent.com/u/1784526?v=4)](https://github.com/emiluzelac "emiluzelac (1 commits)")[![fastlinemedia](https://avatars.githubusercontent.com/u/2453483?v=4)](https://github.com/fastlinemedia "fastlinemedia (1 commits)")[![flynfish](https://avatars.githubusercontent.com/u/253936?v=4)](https://github.com/flynfish "flynfish (1 commits)")[![freakdesign](https://avatars.githubusercontent.com/u/1378665?v=4)](https://github.com/freakdesign "freakdesign (1 commits)")[![Krinkle](https://avatars.githubusercontent.com/u/156867?v=4)](https://github.com/Krinkle "Krinkle (1 commits)")

### Embed Badge

![Health badge](/badges/uninhabited-fitvidsjs/health.svg)

```
[![Health](https://phpackages.com/badges/uninhabited-fitvidsjs/health.svg)](https://phpackages.com/packages/uninhabited-fitvidsjs)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)