Colorbox / color box

var set_height = jQuery(window).height() + 21;
jQuery(document).ready(function($) {
    jQuery(".youtube").colorbox({
        iframe:true,
        width:'100%',
        //height:'100%',        height:set_height,
        rel: 'yougroup',
        fixed:true,
        current: "<span class='playing-of'>"+"Video {current} of {total}"+"</span>",
        title: function() {
            return this.title;
        }
    });
});
 
Make your Colorbox images responsive 


 
<script type="text/javascript">
 // Make ColorBox responsive
 jQuery.colorbox.settings.maxWidth  = '95%';
 jQuery.colorbox.settings.maxHeight = '95%';

 // ColorBox resize function
 var resizeTimer;
 function resizeColorBox()
 {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.load(true);
    }
  }, 300);
 }

 // Resize ColorBox when resizing window or changing mobile device orientation
 jQuery(window).resize(resizeColorBox);
 window.addEventListener("orientationchange", resizeColorBox, false);
</script>