[Embed YouTube & Vimeo videos in a Colorbox popup] Requires http://www.jacklmoore.com/colorbox/ #js

script.js

(function ($) {
  $("#content a[href*='vimeo.com']").each(function() {
    $this = $(this);
    var href = $this.attr('href');
    var vimeoId = href.split('/').pop();
    $this.colorbox({ html: function() {
      var iframe = '<iframe width="853" height="480" src="http://player.vimeo.com/video/' + vimeoId + '?autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
      var output = "<div style='line-height: 0px; overflow: hidden;'>" + iframe + '</div>';
      return output;
    }});
  });
  $("#content a[href*='youtube.com']").each(function() {
    var $this = $(this);
    var href = $this.attr('href');
    var youtubeId = href.split('=').pop();
    $this.colorbox({ html: function() {
      var iframe = '<iframe width="853" height="480" src="http://www.youtube.com/embed/' + youtubeId + '?autoplay=1" frameborder="0" allowFullScreen></iframe>';
      var output = "<div style='line-height: 0px; overflow: hidden;'>" + iframe + '</div>';
      return output;
    }});
  });
})(jQuery);

Hey Rob,

A bit smarter way to do that:

$('a[href*="vimeo.com"]').each(function() {
    $this = $(this);
    var href = 'http://player.vimeo.com/video/' + $this.attr('href').split('/').pop() + '?autoplay=1';
    $this.attr('href',href);
    $this.colorbox({
      iframe:true, 
      href: href,
      innerWidth:640, 
      innerHeight:360
    });
  });

And even some optimization for smaller screens:

function cbEnable() {  
  $('a[href*="vimeo.com"]').each(function() {
    $this = $(this);
    var href = 'http://player.vimeo.com/video/' + $this.attr('href').split('/').pop() + '?autoplay=1';
    $this.attr('href',href).removeAttr('target');
    $this.colorbox({
      iframe:true, 
      href: href,
      innerWidth:640, 
      innerHeight:360
    });
  });
}

function cbDisable() {  
  $('a[href*="vimeo.com"]').each(function() {
    $this = $(this);
    var href = 'http://player.vimeo.com/video/' + $this.attr('href').split('/').pop() + '?autoplay=1';
    $this.attr('href',href).attr('target','_blank'); // show vid in a new tab
    $this.colorbox.remove(); // disable colorbox on small screens
  });
}

// add breakpoints

$.rubberband({
  minWidth: [ 768 ],
    maxWidth: [ 767 ]
});

// enable or disable colorbox based on current breakpoint

$(window).on('snap', function(e, data) {
  if (data.maxWidth == 767) {
    cbDisable();
  }
  if (data.minWidth == 768) {
    cbEnable();
  }   
});