Make embedded YouTube or Vimeo iframes scale proportionally on a responsive website without writing custom CSS.
Apply FitVids to a blog or CMS so all video embeds resize correctly on mobile without editing each embed code individually.
Extend FitVids with a custom selector to support a non-standard video provider that outputs fixed-size iframes.
| davatron5000/fitvids.js | uswds/public-sans | remy/html5demos | |
|---|---|---|---|
| Stars | 4,717 | 4,717 | 4,728 |
| Language | HTML | HTML | HTML |
| Setup difficulty | easy | easy | easy |
| Complexity | 1/5 | 1/5 | 1/5 |
| Audience | developer | designer | developer |
Figures from each repo's GitHub metadata at analysis time.
Requires jQuery 1.7 or later, the plugin itself is just one script include away.
FitVids.js is a small jQuery plugin that solves a common layout problem in responsive web design: embedded videos that refuse to resize properly when the browser window changes width. YouTube, Vimeo, and a handful of other players produce fixed-size iframes by default, which break on narrow screens. FitVids automatically wraps each video in a container that scales proportionally, so the video fills its column at any screen size. To use it, you include jQuery (version 1.7 or later) and the FitVids script in your page, then call .fitVids() on the element that contains your videos. From that point on, the sizing is handled entirely by percentage-based CSS. The script sets up the wrapper once, no ongoing JavaScript is needed after the initial call. The plugin ships with built-in support for YouTube and Vimeo. Blip.tv, Viddler, and Kickstarter were supported at some point but may be deprecated. If you use a video provider that is not on the default list, you can pass a custom CSS selector to tell FitVids which iframes to include. This is also the recommended way to test whether a given player works well with the scaling approach. There is also an option to exclude specific videos or containers. Adding a fitvidsignore class to an element tells the plugin to skip it, or you can pass a list of selectors via the ignore option if you prefer not to modify your markup. One known limitation: Vimeo's Autoplay API does not work with FitVids in Internet Explorer 11. For videos that need to autoplay in that browser, you have to wrap them manually. The library is a focused solution to a narrow problem that was widespread during the rise of responsive design.
A jQuery plugin that makes embedded YouTube and Vimeo videos resize proportionally at any screen width, solving the fixed-size iframe problem in responsive web designs with a single function call.
Mainly HTML. The stack also includes JavaScript, jQuery, CSS.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.