Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS: Embed YouTube & Vimeo videos in a Colorbox popup. Requires http://www.jacklmoore.com/colorbox/
(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);
@bratsun

This comment has been minimized.

Copy link

bratsun commented Oct 31, 2013

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();
  }   
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.