Skip to content

Instantly share code, notes, and snippets.

@ledlogic
Forked from jawinn/boostrap-youtube-modal.js
Last active December 29, 2015 03:29
Show Gist options
  • Save ledlogic/7607764 to your computer and use it in GitHub Desktop.
Save ledlogic/7607764 to your computer and use it in GitHub Desktop.
* Modifies youtube anchor urls * Uses purl plugin instead of queryparser plugin. * Uses require * Self-contained html
/**
* 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('');
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment