I am little late updating this thread but I managed to create a method or more of a plugin by extending jQuery's prototype object. This is a nice link to start learning.
// following is the method by extending the jQuery's prototype object
// to convert and embed an element into a video pop-up
(function ($) {
$.fn.videoPlayer = function (options) {
var defaults = $.extend({
title: "",
videoId: "",
autoplay: 1
}, options);
var videoBox = this.find('#VideoBox');
var videoElement = document.createElement('iframe');
var src = 'https://www.youtube.com/embed/' + defaults.videoId + '?wmode=opaque&autoplay=' + defaults.autoplay + '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';
this.find('#VideoTitle').text(defaults.title);
$(videoElement).attr({
'src': src,
'frameborder': 0,
'width': '100%',
'height': '90%'
});
videoBox.html(videoElement);
this.dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} },
{ hide: { effect: "fade", duration: 250} },
{ close: function (event, ui) {
$(videoElement).remove();
$(this).dialog('destroy');
}
});
//making the method chainable!
return this;
};
})(jQuery);
$(function(){
$('#VideoPlayerPopUp #Close').click(function () {
$("#VideoCatcher").dialog("close");
});
$('#Entertainment .launch-video').click(function () {
var element = $(this);
$('#VideoCatcher').videoPlayer({
title: element.attr('data-videoTitle'),
videoId: element.attr('data-videoId')
});
});
});
I have used custom HTML data-attributes for video title and video id. This will keep HTML clean and semantic. You can of course style/customize the pop-up accordingly.
Visit this working demo to see this in action.