| 2 |
lars |
1 |
/*global jQuery */
|
|
|
2 |
/*jshint multistr:true browser:true */
|
|
|
3 |
/*!
|
|
|
4 |
* FitVids 1.0
|
|
|
5 |
*
|
|
|
6 |
* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
|
|
|
7 |
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
|
|
|
8 |
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
|
|
|
9 |
*
|
|
|
10 |
* Date: Thu Sept 01 18:00:00 2011 -0500
|
|
|
11 |
*/
|
|
|
12 |
|
|
|
13 |
(function( $ ){
|
|
|
14 |
|
|
|
15 |
"use strict";
|
|
|
16 |
|
|
|
17 |
$.fn.fitVids = function( options ) {
|
|
|
18 |
var settings = {
|
|
|
19 |
customSelector: null
|
|
|
20 |
};
|
|
|
21 |
|
|
|
22 |
var div = document.createElement('div'),
|
|
|
23 |
ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
|
|
|
24 |
|
|
|
25 |
div.className = 'fit-vids-style';
|
|
|
26 |
div.innerHTML = '­<style> \
|
|
|
27 |
.fluid-width-video-wrapper { \
|
|
|
28 |
width: 100%; \
|
|
|
29 |
position: relative; \
|
|
|
30 |
padding: 0; \
|
|
|
31 |
} \
|
|
|
32 |
\
|
|
|
33 |
.fluid-width-video-wrapper iframe, \
|
|
|
34 |
.fluid-width-video-wrapper object, \
|
|
|
35 |
.fluid-width-video-wrapper embed { \
|
|
|
36 |
position: absolute; \
|
|
|
37 |
top: 0; \
|
|
|
38 |
left: 0; \
|
|
|
39 |
width: 100%; \
|
|
|
40 |
height: 100%; \
|
|
|
41 |
} \
|
|
|
42 |
</style>';
|
|
|
43 |
|
|
|
44 |
ref.parentNode.insertBefore(div,ref);
|
|
|
45 |
|
|
|
46 |
if ( options ) {
|
|
|
47 |
$.extend( settings, options );
|
|
|
48 |
}
|
|
|
49 |
|
|
|
50 |
return this.each(function(){
|
|
|
51 |
var selectors = [
|
|
|
52 |
"iframe[src*='player.vimeo.com']",
|
|
|
53 |
"iframe[src*='www.youtube.com']",
|
|
|
54 |
"iframe[src*='www.kickstarter.com']",
|
|
|
55 |
"object",
|
|
|
56 |
"embed"
|
|
|
57 |
];
|
|
|
58 |
|
|
|
59 |
if (settings.customSelector) {
|
|
|
60 |
selectors.push(settings.customSelector);
|
|
|
61 |
}
|
|
|
62 |
|
|
|
63 |
var $allVideos = $(this).find(selectors.join(','));
|
|
|
64 |
|
|
|
65 |
$allVideos.each(function(){
|
|
|
66 |
var $this = $(this);
|
|
|
67 |
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
|
|
|
68 |
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
|
|
|
69 |
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
|
|
|
70 |
aspectRatio = height / width;
|
|
|
71 |
if(!$this.attr('id')){
|
|
|
72 |
var videoID = 'fitvid' + Math.floor(Math.random()*999999);
|
|
|
73 |
$this.attr('id', videoID);
|
|
|
74 |
}
|
|
|
75 |
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
|
|
|
76 |
$this.removeAttr('height').removeAttr('width');
|
|
|
77 |
});
|
|
|
78 |
});
|
|
|
79 |
};
|
|
|
80 |
})( jQuery );
|