davatron5000/fitvids.js

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.