• Home
  • Systems
  • Networking
  • WordPress
  • Web
  • Geekery

Analysis and Review

Simple Youtube POPUP Player

July 18, 2013 by Kurt Turner

Simple Youtube POPUP Player

I can’t and won’t take credit for this, but it’s an awesome script you can put on any website (even a wordpress post) which will take youtube videos and put them in a slick popup.

credits to this bad mofo for putting it out there.

I’ve placed it on my website in case his website is ever down……

You’ll notice I moved the scripts to the body section in this sample but it’s recommended you put them in your head.

[code]



jQuery YouTube Popup Player Plugin







Tessst Me


[/code]

Here’s the youtube popup script from http://lab.abhinayrathore.com/jquery_youtube/

[code]
/*!
* jQuery YouTube Popup Player Plugin v2.3
* http://lab.abhinayrathore.com/jquery_youtube/
* Last Updated: Feb 26, 2013
*/
(function ($) {
var YouTubeDialog = null;
var methods = {
//initialize plugin
init: function (options) {
options = $.extend({}, $.fn.YouTubePopup.defaults, options);

// initialize YouTube Player Dialog
if (YouTubeDialog == null) {
YouTubeDialog = $(‘

‘).css({ display: ‘none’, padding: 0 });
if(options.cssClass != ”) YouTubeDialog.addClass(options.cssClass);
$(‘body’).append(YouTubeDialog);
YouTubeDialog.dialog({ autoOpen: false, resizable: false, draggable: options.draggable, modal: options.modal,
close: function () {
YouTubeDialog.html(”);
$(“.ui-dialog-titlebar”).show();
}
});
}

return this.each(function () {
var obj = $(this);
var data = obj.data(‘YouTube’);
if (!data) { //check if event is already assigned
obj.data(‘YouTube’, { target: obj, ‘active’: true });
$(obj).bind(‘click.YouTubePopup’, function () {
var youtubeId = options.youtubeId;
if ($.trim(youtubeId) == ” && obj.is(“a”)) {
youtubeId = getYouTubeIdFromUrl(obj.attr(“href”));
}
if ($.trim(youtubeId) == ” || youtubeId === false) {
youtubeId = obj.attr(options.idAttribute);
}
var videoTitle = $.trim(options.title);
if (videoTitle == ”) {
if (options.useYouTubeTitle) setYouTubeTitle(youtubeId);
else videoTitle = obj.attr(‘title’);
}

//Format YouTube URL
var YouTubeURL = “http://www.youtube.com/embed/” + youtubeId + “?rel=0&showsearch=0&autohide=” + options.autohide;
YouTubeURL += “&autoplay=” + options.autoplay + “&controls=” + options.controls + “&fs=” + options.fs + “&loop=” + options.loop;
YouTubeURL += “&showinfo=” + options.showinfo + “&color=” + options.color + “&theme=” + options.theme;

//Setup YouTube Dialog
YouTubeDialog.html(getYouTubePlayer(YouTubeURL, options.width, options.height));
YouTubeDialog.dialog({ ‘width’: ‘auto’, ‘height’: ‘auto’ }); //reset width and height
YouTubeDialog.dialog({ ‘minWidth’: options.width, ‘minHeight’: options.height, title: videoTitle });
YouTubeDialog.dialog(‘open’);
$(“.ui-widget-overlay”).fadeTo(‘fast’, options.overlayOpacity); //set Overlay opacity
if(options.hideTitleBar && options.modal){ //hide Title Bar (only if Modal is enabled)
$(“.ui-dialog-titlebar”).hide(); //hide Title Bar
$(“.ui-widget-overlay”).click(function () { YouTubeDialog.dialog(“close”); }); //automatically assign Click event to overlay
}
if(options.clickOutsideClose && options.modal){ //assign clickOutsideClose event only if Modal option is enabled
$(“.ui-widget-overlay”).click(function () { YouTubeDialog.dialog(“close”); }); //assign Click event to overlay
}
return false;
});
}
});
},
destroy: function () {
return this.each(function () {
$(this).unbind(“.YouTubePopup”);
$(this).removeData(‘YouTube’);
});
}
};

function getYouTubePlayer(URL, width, height) {
var YouTubePlayer = ‘‘;
return YouTubePlayer;
}

function setYouTubeTitle(id) {
var url = “https://gdata.youtube.com/feeds/api/videos/” + id + “?v=2&alt=json”;
$.ajax({ url: url, dataType: ‘jsonp’, cache: true, success: function(data){ YouTubeDialog.dialog({ title: data.entry.title.$t }); } });
}

function getYouTubeIdFromUrl(youtubeUrl){
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
var match = youtubeUrl.match(regExp);
if (match && match[2].length==11){
return match[2];
} else {
return false;
}
}

$.fn.YouTubePopup = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === ‘object’ || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(‘Method ‘ + method + ‘ does not exist on jQuery.YouTubePopup’);
}
};

//default configuration
$.fn.YouTubePopup.defaults = {
‘youtubeId’: ”,
‘title’: ”,
‘useYouTubeTitle’: true,
‘idAttribute’: ‘rel’,
‘cssClass’: ”,
‘draggable’: false,
‘modal’: true,
‘width’: 640,
‘height’: 480,
‘hideTitleBar’: false,
‘clickOutsideClose’: false,
‘overlayOpacity’: 0.5,
‘autohide’: 2,
‘autoplay’: 1,
‘color’: ‘red’,
‘controls’: 1,
‘fs’: 1,
‘loop’: 0,
‘showinfo’: 0,
‘theme’: ‘light’
};
})(jQuery);
[/code]

Filed Under: Geekery

Latest and Greatest

Apache vs Nginx for WordPress

Certbot Lets Encrypt And WordPress MU Multi-Site

How To Find and Replace Multiple File in MS Word

How To Get Stretch Res on Windows 10 AMD Radeon For Game Play

This is the ASUS Chromebox we've been running for 2 years as our "brain" for our home grown digital display kiosk.

DIY Digital Signage Bulletin Board or Kiosk

© Copyright Analysis And Review · All Rights Reserved ·