PK [°NíH(i i
tests.htmlnu W+A„¶
Fluid Width Videos with Fitvids.js
PK [°N¨6…H README.mdnu W+A„¶ # Introducing FitVids.js
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?
Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with `fitVids()`.
```html
```
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
YouTube | Y |
Vimeo | Y |
Blip.tv | Y |
Viddler | Y |
Kickstarter | Y |
## 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_):
```javascript
$("#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
* Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.
## 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
@ChrisCoyier, @davatron5000, @TrentWalton, @raygunray
PK [°N\0ꃑ ‘ CONTRIBUTING.mdnu W+A„¶ ## Submitting issues
### Reduced test case required
All bug reports and problem issues require a reduced test case. See [CSS Tricks - Reduced Test Cases](http://css-tricks.com/reduced-test-cases/) on why they _"are the absolute, ... number one way to troubleshoot bugs."_
+ A reduced test case is an isolated example that demonstrates the bug or issue.
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug. No extra functionality or styling.
+ A link to your site is **not** a reduced test case.
+ A [CodePen](http://codepen.io) is preferred so we can help you fix an error.
+ Until you provide a reduced test case, your issue will be closed.
This guideline may seem a little harsh, but it helps dramatically. Reduced test cases help you identify the issue at hand and understand your own code. On our side, they greatly reduce the amount of time spent resolving the issue.PK [°N*”m
bower.jsonnu W+A„¶ {
"name": "jquery.fitvids",
"version": "1.1.0",
"main": "./jquery.fitvids.js",
"ignore": [
"**/.*",
"node_modules",
"components",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": ">= 1.7.0"
},
"homepage": "https://github.com/davatron5000/FitVids.js",
"authors": [
"Dave Rupert "
],
"description": "FitVids makes video embeds responsive",
"keywords": [
"FitVids",
"Responsive",
"RWD",
"YouTube",
"Vimeo"
],
"license": "WTFPL"
}
PK [°Nèûº®Š
Š
jquery.fitvids.jsnu W+A„¶ /*global jQuery */
/*jshint browser:true */
/*!
* FitVids 1.1
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
*/
(function( $ ){
"use strict";
$.fn.fitVids = function( options ) {
var settings = {
customSelector: null
};
if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement('div');
div.innerHTML = 'x
';
head.appendChild(div.childNodes[1]);
}
if ( options ) {
$.extend( settings, options );
}
return this.each(function(){
var selectors = [
"iframe[src*='player.vimeo.com']",
"iframe[src*='youtube.com']",
"iframe[src*='youtube-nocookie.com']",
"iframe[src*='kickstarter.com'][src*='video.html']",
"object",
"embed"
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not("object object"); // SwfObj conflict patch
$allVideos.each(function(){
var $this = $(this);
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if(!$this.attr('id')){
var videoID = 'fitvid' + Math.floor(Math.random()*999999);
$this.attr('id', videoID);
}
$this.wrap('').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
$this.removeAttr('height').removeAttr('width');
});
});
};
// Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );
PK [°NíH(i i
tests.htmlnu W+A„¶ PK [°N¨6…H £ README.mdnu W+A„¶ PK [°N\0ꃑ ‘ í CONTRIBUTING.mdnu W+A„¶ PK [°N*”m
½ bower.jsonnu W+A„¶ PK [°Nèûº®Š
Š
jquery.fitvids.jsnu W+A„¶ PK } á%