Making the Colorbox jquery plugin responsive.

colorbox-activate.js

/**
 * @file
 * Activating colorbox using Drupal Behaviours to make sure it is only loaded within its context.
 */

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

(function ($, Drupal, window, document, undefined) {
  Drupal.behaviors.colorbox = {
    attach: function (context, settings) {
     // Colorbox doesn't load youtube videos out of the box.
     // Custom Function to load youtube videos
    $('.app-challenge--media a').colorbox({
      iframe: true,
      width: 640,
      height: 390,
      opacity:0.8,
      rel:'app',
      href:function(){
        var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
        if (videoId && videoId[1]) {
          return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
        }
      }
    });

    // The Art Competition Page
      $('.art-competition--media a').colorbox({
        opacity: 0.8,
        rel: 'art'
      });

      // Colorbox is not responsive out of the box. Custom responsive adjustments.
      //Configure colorbox call back to resize with custom dimensions
      $.colorbox.settings.onLoad = function() {
        colorboxResize();
      };
      //Customize colorbox dimensions
      var colorboxResize = function(resize) {
        var width ;
        var height;

        if($("#cboxLoadedContent > div")) {
          width = "90%";
          height = "90%";
        }
        $.colorbox.settings.maxHeight = height;
        $.colorbox.settings.maxWidth = width;

        //if window is resized while lightbox open
        if(resize) {
          $.colorbox.resize({
            'height': height,
            'width': width
          });
        }
      };

      //In case of window being resized
      $(window).resize(function() {
        colorboxResize(true);
      });
    }
  }


})(jQuery, Drupal, this, this.document);