How to add a custom video player to FitVids.js?

Use the customSelector option in the fitVids call to specify iframe selectors for unsupported vendors, like iframe[src^='http://mycoolvideosite.com'], as shown in the README example for custom integration.

FitVids.js vs CSS-only solutions: which is better for responsive videos?

FitVids.js automates the intrinsic ratio method with JavaScript, handling dynamic embeds easily, while CSS-only solutions require manual setup but avoid JS dependencies. Choose based on whether you need automation or prefer lightweight CSS.

Does FitVids.js work with React or Vue.js?

No, FitVids.js is a jQuery plugin and isn't natively compatible with React or Vue. You'd need to wrap it in a component or use alternatives like react-player or vue-video-player for framework-specific solutions.

How to ignore specific videos in FitVids.js?

Add the class 'fitvidsignore' to the video container or use the ignore option in the fitVids call with selectors, such as { ignore: '.mycooldiv, #myviiid' }, as detailed in the README for selective exclusion.

What are the known issues with FitVids.js?

The main known issue is Vimeo Autoplay API incompatibility in IE11, requiring manual wrapping. Also, some supported vendors like Blip.tv may be deprecated, so check for updates or use customSelector for new platforms.

Can FitVids.js handle videos embedded without containers?

Yes, by targeting the parent of iframes, such as with $('iframe[src*="youtube"]').parent().fitVids(), as shown in the README to dynamically apply fluid wrapping to videos in general content areas.

Open-Awesome

FitVids.js

HTML

A lightweight jQuery plugin that makes video embeds fluid and responsive using CSS intrinsic ratios.

Visit Website GitHub

4.7k stars955 forks0 contributors

What is FitVids.js?

FitVids.js is a lightweight jQuery plugin that automatically makes embedded videos from platforms like YouTube and Vimeo responsive. It applies the intrinsic ratio method to ensure videos scale fluidly within containers, eliminating manual CSS fixes for different screen sizes.

Target Audience

Frontend developers and web designers building responsive websites who need a simple, reliable solution for fluid video embeds without custom CSS.

Value Proposition

Developers choose FitVids.js for its zero-configuration approach, broad player support, and minimal footprint—solving responsive video challenges with just a few lines of jQuery.

Overview

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

Use Cases

Best For

Making YouTube and Vimeo embeds responsive in blog posts
Fixing video aspect ratios on mobile-friendly websites
Adding custom video players to responsive layouts
Handling client-added videos without predefined containers
Quickly implementing fluid videos in jQuery-based projects
Ensuring cross-browser compatible video scaling

Not Ideal For

Projects not using jQuery or aiming to eliminate jQuery dependency
Websites requiring Vimeo autoplay functionality in Internet Explorer 11
Applications with video embeds from unsupported modern platforms needing out-of-the-box compatibility
Teams building with modern frameworks like React or Vue where native component solutions are preferred

Pros & Cons

Pros

Automatic Fluid Wrapping

Wraps video iframes in a div.fluid-width-video-wrapper to apply the intrinsic ratio method, ensuring responsive scaling with just a JavaScript call, as demonstrated in the minimal setup example.

Broad Player Support

Supports YouTube, Vimeo, and other platforms out of the box, with a customSelector option to add unsupported vendors, providing flexibility for various embed sources.

Flexible Ignoring Options

Allows exclusion of specific videos using the fitvidsignore class or ignore option, giving developers control over which embeds are affected, as detailed in the README.

Dynamic Targeting Capability

Can target video parents for embedded content without predefined containers, enabling handling of client-added videos dynamically, as shown in the example with YouTube iframes.

Cons

jQuery Dependency

Requires jQuery 1.7+, adding library overhead and making it unsuitable for projects avoiding jQuery or using modern JavaScript frameworks.

Deprecated Vendor Support

Some out-of-the-box supported players like Blip.tv and Viddler are marked with asterisks indicating potential deprecation, reducing relevance for current video platforms.

Browser Compatibility Issues

Has a known issue with Vimeo Autoplay API not working in IE11, requiring manual wrapping for specific cases, as admitted in the README's known issues section.

Frequently Asked Questions

Related Projects

Video.js

Video.js - open source HTML5 video player

Stars39,832

Forks7,484

Last commit25 days ago

flv.js

HTML5 FLV Player

Stars23,202

Forks3,343

Last commit2 years ago

hls.js

HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.

HTML5 <audio> or <video> player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers.

Stars8,299

Forks1,541

Last commit2 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub