git.roojs.org Git - bootswatch/blob - mPurpose/js/jquery.fitvids.js

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