git.roojs.org Git - bootswatch/blob - mPurpose/js/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     if(!document.getElementById('fit-vids-style')) {
  23
  24       var div = document.createElement('div'),
  25           ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
  26
  27       div.className = 'fit-vids-style';
  28       div.id = 'fit-vids-style';
  29       div.style.display = 'none';
  30       div.innerHTML = '&shy;<style>         \
  31         .fluid-width-video-wrapper {        \
  32            width: 100%;                     \
  33            position: relative;              \
  34            padding: 0;                      \
  35         }                                   \
  36                                             \
  37         .fluid-width-video-wrapper iframe,  \
  38         .fluid-width-video-wrapper object,  \
  39         .fluid-width-video-wrapper embed {  \
  40            position: absolute;              \
  41            top: 0;                          \
  42            left: 0;                         \
  43            width: 100%;                     \
  44            height: 100%;                    \
  45         }                                   \
  46       </style>';
  47
  48       ref.parentNode.insertBefore(div,ref);
  49
  50     }
  51
  52     if ( options ) {
  53       $.extend( settings, options );
  54     }
  55
  56     return this.each(function(){
  57       var selectors = [
  58         "iframe[src*='player.vimeo.com']",
  59         "iframe[src*='youtube.com']",
  60         "iframe[src*='youtube-nocookie.com']",
  61         "iframe[src*='kickstarter.com'][src*='video.html']",
  62         "object",
  63         "embed"
  64       ];
  65
  66       if (settings.customSelector) {
  67         selectors.push(settings.customSelector);
  68       }
  69
  70       var $allVideos = $(this).find(selectors.join(','));
  71       $allVideos = $allVideos.not("object object"); // SwfObj conflict patch
  72
  73       $allVideos.each(function(){
  74         var $this = $(this);
  75         if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
  76         var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
  77             width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
  78             aspectRatio = height / width;
  79         if(!$this.attr('id')){
  80           var videoID = 'fitvid' + Math.floor(Math.random()*999999);
  81           $this.attr('id', videoID);
  82         }
  83         $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
  84         $this.removeAttr('height').removeAttr('width');
  85       });
  86     });
  87   };
  88 })( jQuery );