├── jquery.fitvids.min.js
├── README.md
├── jquery.fitvids.js
└── tests.html


/jquery.fitvids.min.js:
--------------------------------------------------------------------------------
1 | (function(a){"use strict";a.fn.fitVids=function(b){var c={customSelector:null},d=document.createElement("div"),e=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0];return d.className="fit-vids-style",d.innerHTML="&shy;<style>               .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%;                          }                                       </style>",e.parentNode.insertBefore(d,e),b&&a.extend(c,b),this.each(function(){var b=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com']","object","embed"];c.customSelector&&b.push(c.customSelector);var d=a(this).find(b.join(","));d.each(function(){var b=a(this);if(!("embed"===this.tagName.toLowerCase()&&b.parent("object").length||b.parent(".fluid-width-video-wrapper").length)){var c="object"===this.tagName.toLowerCase()||b.attr("height")&&!isNaN(parseInt(b.attr("height"),10))?parseInt(b.attr("height"),10):b.height(),d=isNaN(parseInt(b.attr("width"),10))?b.width():parseInt(b.attr("width"),10),e=c/d;if(!b.attr("id")){var f="fitvid"+Math.floor(999999*Math.random());b.attr("id",f)}b.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),b.removeAttr("height").removeAttr("width")}})})}})(jQuery);
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Introducing FitVids.js
 2 | A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
 3 | 
 4 | 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.
 5 | 
 6 | ## How Do I Use It?
 7 | Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with `fitVids()`.
 8 | 
 9 | ```html
10 | <script src="path/to/jquery.min.js"></script>
11 | <script src="path/to/jquery.fitvids.js"></script>
12 | <script>
13 |   $(document).ready(function(){
14 |     // Target your .container, .wrapper, .post, etc.
15 |     $("#thing-with-videos").fitVids();
16 |   });
17 | </script>
18 | ```
19 | 
20 | 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.
21 | 
22 | ## Currently Supported Players
23 | <table>
24 | <tr><td>YouTube</td><td>Y</td></tr>
25 | <tr><td>Vimeo</td><td>Y</td></tr>
26 | <tr><td>Blip.tv</td><td>Y</td></tr>
27 | <tr><td>Viddler</td><td>Y</td></tr>
28 | <tr><td>Kickstarter</td><td> Y</td></tr>
29 | </table>
30 | 
31 | ## Add Your Own Video Vendor
32 | 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_):
33 | 
34 | ```javascript
35 |   $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
36 |   // Selectors are comma separated, just like CSS
37 | ```
38 | 
39 | _Note:_ This will be the quickest way to add your own custom vendor as well as test your player's compatibility with FitVids.
40 | 
41 | ## Changelog
42 | * _09.02.11 - v1 - 2.376kb_
43 |   * Added `customSelector` option
44 | * _09.02.11 - v1 - 2.135kb_
45 | 	* Initial release
46 | 	* Vimeo,YouTube, Blip.tv, Viddler, Kickstarter
47 | 
48 | ## Credits
49 | @ChrisCoyier, @davatron5000, @TrentWalton, @raygunray
50 | 


--------------------------------------------------------------------------------
/jquery.fitvids.js:
--------------------------------------------------------------------------------
 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 = '&shy;<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*='youtube.com']",
54 |         "iframe[src*='youtube-nocookie.com']",
55 |         "iframe[src*='kickstarter.com']",
56 |         "object",
57 |         "embed"
58 |       ];
59 | 
60 |       if (settings.customSelector) {
61 |         selectors.push(settings.customSelector);
62 |       }
63 | 
64 |       var $allVideos = $(this).find(selectors.join(','));
65 | 
66 |       $allVideos.each(function(){
67 |         var $this = $(this);
68 |         if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
69 |         var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
70 |             width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
71 |             aspectRatio = height / width;
72 |         if(!$this.attr('id')){
73 |           var videoID = 'fitvid' + Math.floor(Math.random()*999999);
74 |           $this.attr('id', videoID);
75 |         }
76 |         $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
77 |         $this.removeAttr('height').removeAttr('width');
78 |       });
79 |     });
80 |   };
81 | })( jQuery );
82 | 


--------------------------------------------------------------------------------
/tests.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 | 		<meta name="viewport" content="width=device-width,initial-scale=1">
 5 |         <title>Fluid Width Videos with Fitvids.js</title>
 6 |         <style>
 7 |         	body {
 8 | 	background-image: url(data:image/png;base64,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);
 9 |         	}
10 |         
11 |           video {
12 |             width: 100%;
13 |             height: auto;
14 |           }
15 |           
16 |           .container {
17 |             width: 70%;
18 |             padding: 5%;
19 |             margin:0px auto;
20 |             background:#fff;
21 |             box-shadow: 0 5px 5px rgba(0,0,0,0.5);
22 |           }
23 |           
24 |           .vendor {
25 |             padding: 2%;
26 |             background: #d1eed1;
27 |             margin-bottom: 2em;
28 |           }
29 |           
30 |           .unsupported {
31 |             background: #fddfde;
32 |           }
33 |         </style>
34 |     </head>
35 |     <body>
36 |       <div class="container">
37 |         <div class="vendor">
38 |         	<iframe width="425" height="349" src="http://www.youtube.com/embed/FKWwdQu6_ok" frameborder="0" allowfullscreen></iframe>
39 | 	      </div>
40 | 	      <div class="vendor">
41 |         	<iframe src="http://player.vimeo.com/video/25708134?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
42 |         </div>
43 |         <div class="vendor">
44 |         	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="437" height="288" id="viddler"><param name="movie" value="http://www.viddler.com/player/d6c37b62/" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="flashvars" value="fake=1"/><embed src="http://www.viddler.com/player/d6c37b62/" width="437" height="288" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" flashvars="fake=1" name="viddler" ></embed></object>
45 |         </div>
46 |         <div class="vendor">
47 |         	<embed src="http://blip.tv/play/AYHCnikC" type="application/x-shockwave-flash" width="550" height="396" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" ></embed>
48 |         </div>
49 |         <div class="vendor">
50 | <iframe frameborder="0" height="410px" src="http://www.kickstarter.com/projects/30453381/the-shape-of-design/widget/video.html" width="480px"></iframe>
51 |         </div>
52 |         <div class="vendor">
53 |           <iframe width="520px" height="391px" src="http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed" frameborder="0" allowfullscreen></iframe>
54 |         </div>
55 |       </div>
56 |     
57 |       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
58 |       <script src="jquery.fitvids.js"></script>
59 |       <script>
60 |         // Basic FitVids Test
61 |         $(".container").fitVids();
62 |         // Custom selector and No-Double-Wrapping Prevention Test
63 |         $(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});  
64 |       </script>
65 |       </body>
66 |   </html>


--------------------------------------------------------------------------------