* Modifies youtube anchor urls * Uses purl plugin instead of queryparser plugin. * Uses require * Self-contained html

boostrap-youtube-modal.js

/**
 * Modifies youtube anchor urls 
 * Uses purl plugin instead of queryparser plugin.
 * Uses require
 * If too small, punts and goes to original url (use target to pop).
 * 
 * @see http://www.joshuawinn.com/opening-youtube-links-dynamically-in-a-twitter-bootstrap-modal-window/
 */

define(['require',
        'jquery',
        'purl'
    ], function(require, $, purl) {
	
	var DEFAULT_DIM = { width: 560, height: 315 };
	
	$(function() {
		var $a = $('a.youtube[href^="http://www.youtube.com"]');
		$a.on('click', function(e) {
			var $this = $(this);
			var h = $this.attr('href');
		 	var v = purl(h).param('v');
			if (v) {
				var dataDim = {
					width: $this.attr('data-width'),
					height: $this.attr('data-height')
				};
				var vidDim = {
					width: dataDim.width ? parseInt(dataDim.width, 10) : DEFAULT_DIM.width,
					height: dataDim.height ? parseInt(dataDim.height, 10) : DEFAULT_DIM.height
				};				
				
				// Added fit width parameter
				if ( $(this).is('.fit-width') ) {
					var windowDim = {
						width: Math.floor($(window).width() * 0.5),
						height: Math.floor($(window).height() * 0.5)
					};
					
					// too small - use youtube link
					if (windowDim.width < DEFAULT_DIM.width || windowDim.height < DEFAULT_DIM.height) {
						return true;
					}

					// determine width or height constrained
					vidDim.height = Math.floor(windowDim.width * DEFAULT_DIM.height / DEFAULT_DIM.width);
					if (vidDim.height <= windowDim.height) {
						vidDim.width = Math.floor(windowDim.height * DEFAULT_DIM.width / DEFAULT_DIM.height);
					} else {
						vidDim.width = windowDim.width;
					}
					if (vidDim.width < DEFAULT_DIM.width) {
						return true;
					}					
				}
				
				e.preventDefault();
				 				
				// create mediamodal if does not exist
				var mm$ = $('#mediaModal .modal-body');
				if (mm$.size() === 0) {
					var c = '<div class="modal fade" id="mediaModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"></div></div></div></div>';
					$("body").append(c);
				}
				
				// update sizes
				$('#mediaModal').css('width', vidDim.width).css('height', vidDim.height).css('margin-left', -Math.floor(vidDim.width/2));
				$('#mediaModal .modal-dialog').css('width', vidDim.width).css('height', vidDim.height);
				
				// update url
				var u = 'http://www.youtube.com/embed/'+ v + '?rel=0&wmode=transparent&showinfo=0&autoplay=1';
				var iFrameCode = '<iframe width="' + vidDim.width + '" height="'+ vidDim.height +'" scrolling="no" allowtransparency="true" allowfullscreen="true" src="' + u + '" frameborder="0"></iframe>';
				$('#mediaModal .modal-body').html(iFrameCode);
								
				$('#mediaModal').modal();
				return false;
			}
			return true;
		});
		 
		// Clear modal contents on close. 
		// There was mention of videos that kept playing in the background.
		$('#mediaModal').on('hidden.bs.modal', function () {
			$('#mediaModal .modal-body').html('');
		});
	
	});
});