Kode jQuery youtube Popup Player Plugin

Sebagai tambahan ke youtube player PopUP Yang sudah di share, Untuk kali ini saya coba berbagi sebuah plugin JQuery untuk menampilkan video Youtube di kotak PopUP.  Plugin ini  menggunakan iframe kode terbaru dari fitur kedua Flash dan HTML5 player.

Untuk menampilkan kotak dialog popUP menggunakan JQuery UI Dialog widget yang menyediakan kotak dialog lintas-browser yang kuat dengan judul bar dan mendukung kotak bergerak denagan perilaku PopUp, Anda juga bisa menyesuaikan tema JQuery UI dialog Widget yang sesuai dengan warna dan gaya dari situs anda.

Untuk menggunakan plugin ini sangatlah mudah dan cukup fleksibel untuk digunakan pada setiap elemen DOM yang mendukung onclick kode JavaScript, Anda cuma memerlukan pemasangan kode video youtube Id di salahsatu element DOM atribut (beafult rel) dan menginisialisasi dalam pilihan plugin (selain rel) anda bahkan bisa memberikan Judul ke kitak  dialog popUP dengan mendefinisikan dalam atribut jufdul atau Plugin pilihan anda.

Plugin ini menawarkan banyak pilihan konfigurasi untuk kotak dialog dan pemutar video Youtube.

Test Me




Persyaratan Pemasangan :

Plugin ini dibuat di atas Jquery sehingga anda perlu memasukan kode jQuery ini pada halaman web anda.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Anda juga perlu jQuery UI anda bisa langsung mengunjungi di sini

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

untuk kode yang terakhir memasukan file Plugin Youtube PopUp jQuery

<script type="text/javascript" src="https://cdn.rawgit.com/abhinayrathore/jQuery-YouTube-Popup-Player-Plugin/b3378b7c/jquery.youtubepopup.min.js"></script>

Untuk mendapatkan setiap URL youtube standard, Untuk pemasangan plugin, tapi untuk elemen dom lain yang tidak mendukung href, anda akan memerlukan Id Youtube untuk pemasangan video, anda bisa mendapatkan Video Id Youtube dari url sepoerti gambar di bawah ini ( antara karakter "v=" dan "&" jika ada)

Contoh dan Penggunaan

Cukup menginisalisasi popup Youtube dalam acara buka halaman anda seperti berikut ini

$(function () {

    $("a.youtube").YouTubePopup(options);

});

Bagian struktur link

Gunakan salahsatu format URL youtube berikut ini :

<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU">title</a>

<a class="youtube" href="http://www.youtube.com/embed/4eYSpIz2FjU">title</a>

<a class="youtube" href="http://youtu.be/4eYSpIz2FjU">title</a>

Bagaimana Struktur elemen DOM lainya :

1. Masukan id youtube (bukan Url) di "rel" atribut anda dapat menggunakan atribut lain untuk menyimpan youtube id, tetapi anda akan perlu untuk menentukan "id atribute" nama dalam konfigurasi Plugin.
2. anda dapat menggunakan "title" atribut untuk menyimpan judul video dan menetapkan pilihan menggunakan judul youtube palsu. anda bahkan dapat menimpa judul dengan menetapkan sendiri dalam konfigurasi plugin "judul" nilai atribut akan dibiarkan jika opsi menggunakan judul youtube diatur dengan benar.

Contoh elemen DOM .....

<button class="youtube" id="4eYSpIz2FjU" title="...">Click me</button>

Menginisasi Popup youtube dengan pilihan.

$("a.youtube").YouTubePopup({ autoplay: 0, draggable: true });

menetapkan Youtube id menggunakan Plugin..

$("#youtubeLink").YouTubePopup({ youtubeId: '4eYSpIz2FjU', title: 'My New Title' });

<a id="youtubeLink" href="#">YouTube Link</a>

Contoh menggunakan atribut HTML lainya :

popUP pada klik gambar

$("img.youtube").YouTubePopup({ idAttribute: 'id' });

<img class="youtube" id="4eYSpIz2FjU" src="..." title="..." />

PopUP dengan klik tombol

$("button.youtube").YouTubePopup({ idAttribute: 'id' });

<button class="youtube" id="4eYSpIz2FjU" title="...">Click me</button> 

Menggunakan atribut khusus untuk menyimpan id youtube

$("a.youtube").YouTubePopup({ idAttribute: 'youtube' });

<a class="youtube" youtube="4eYSpIz2FjU" href="#" title="...">Click me</a> 

Menyembunyikan Title Bar untuk popUP dialog

$("a.youtube").YouTubePopup({ hideTitleBar: true });

<a class="youtube" rel="4eYSpIz2FjU" href="#">Click me</a> 

Untuk demo kode silahkan kopi kode di bawah ini pada posting anda :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery YouTube Popup Player Plugin</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.youtubepopup.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("a.youtube").YouTubePopup({ autoplay: 0 });
        });
    </script>
</head>
<body>
    <a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>

Jangan lupa tambahkan javascript di bawah ini kedalam HTML

<script type="text/javascript">
/*!
* jQuery YouTube Popup Player Plugin v2.4
* http://lab.abhinayrathore.com/jquery_youtube/
* https://github.com/abhinayrathore/jQuery-YouTube-Popup-Player-Plugin
*/
!function(o,e){function t(o,e,t){var i='<iframe title="YouTube video player" style="margin:0; padding:0;" width="'+e+'" ';return i+='height="'+t+'" src="'+o+'" frameborder="0" allowfullscreen></iframe>'}function i(t){o.ajax({url:e.location.protocol+"//query.yahooapis.com/v1/public/yql",data:{q:"select * from json where url ='http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v="+t+"&format=json'",format:"json"},dataType:"jsonp",success:function(o){o&&o.query&&o.query.results&&o.query.results.json&&u.dialog({title:o.query.results.json.title})}})}function a(o){var e=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,t=o.match(e);return t&&11===t[2].length?t[2]:!1}var u=null,r={},l={init:function(l){return l=o.extend({},o.fn.YouTubePopup.defaults,l),null===u&&(u=o("<div>").css({display:"none",padding:0}),o("body").append(u),u.dialog({autoOpen:!1,resizable:!1,draggable:l.draggable,modal:l.modal,dialogClass:l.cssClass,create:function(){r.backgroundImage=o(".ui-dialog").css("background-image"),r.border=o(".ui-dialog").css("border"),r.backgroundColor=o(".ui-dialog").css("background-color")},close:function(){u.html(""),o(".ui-dialog-titlebar").show(),o(".ui-dialog").css({"background-image":r.backgroundImage,border:r.border,"background-color":r.backgroundColor})}})),this.each(function(){var r,n,d,s,c=o(this),h=c.data("YouTube");h||(c.data("YouTube",{target:c}),o(c).bind("click.YouTubePopup",function(h){r=l.youtubeId,""===o.trim(r)&&c.is("a")&&(r=a(c.attr("href"))),(""===o.trim(r)||r===!1)&&(r=c.attr(l.idAttribute)),n=o.trim(l.title),""===n&&(l.useYouTubeTitle?i(r):n=c.attr("title")),d=e.location.protocol+"//www.youtube.com/embed/"+r+"?rel=0&showsearch=0&autohide="+l.autohide,d+="&autoplay="+l.autoplay+"&controls="+l.controls+"&fs="+l.fs+"&loop="+l.loop,d+="&showinfo="+l.showinfo+"&color="+l.color+"&theme="+l.theme,u.html(t(d,l.width,l.height)),u.dialog({width:"auto",height:"auto"}),u.dialog({minWidth:l.width,minHeight:l.height,title:n}),u.dialog("open"),o(".ui-widget-overlay").fadeTo("fast",l.overlayOpacity),s=o(".ui-dialog-titlebar"),l.hideTitleBar&&l.modal&&(s.hide(),o(".ui-widget-overlay").click(function(){u.dialog("close")})),l.clickOutsideClose&&l.modal&&o(".ui-widget-overlay").click(function(){u.dialog("close")}),s.removeClass("ui-corner-all").addClass("ui-corner-top"),l.showBorder||o(".ui-dialog").css({"background-image":"none",border:"none","background-color":"transparent"}),h.preventDefault()}))})},destroy:function(){return this.each(function(){o(this).unbind(".YouTubePopup"),o(this).removeData("YouTube")})}};o.fn.YouTubePopup=function(e){return l[e]?l[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void o.error("Method "+e+" does not exist on jQuery.YouTubePopup"):l.init.apply(this,arguments)},o.fn.YouTubePopup.defaults={youtubeId:"",title:"",useYouTubeTitle:!0,idAttribute:"rel",cssClass:"YouTubeDialog",draggable:!1,modal:!0,width:640,height:480,hideTitleBar:!1,clickOutsideClose:!1,overlayOpacity:.5,autohide:2,autoplay:1,color:"red",controls:1,fs:1,loop:0,showinfo:0,theme:"light",showBorder:!0}}(jQuery,window);
</script>

ATAu dengan kode di bawah ini :

<script type="text/javascript">
/*!
* jQuery YouTube Popup Player Plugin v2.4
* http://lab.abhinayrathore.com/jquery_youtube/
* https://github.com/abhinayrathore/jQuery-YouTube-Popup-Player-Plugin
*/
(function ($, window) {
var YouTubeDialog = null,
defaultCss = {},
methods = {
//initialize plugin
init: function (options) {
options = $.extend({}, $.fn.YouTubePopup.defaults, options);

// initialize YouTube Player Dialog
if (YouTubeDialog === null) {
YouTubeDialog = $('<div>').css({
display: 'none',
padding: 0
});
$('body').append(YouTubeDialog);
YouTubeDialog.dialog({
autoOpen: false,
resizable: false,
draggable: options.draggable,
modal: options.modal,
dialogClass: options.cssClass,
create: function () {
defaultCss.backgroundImage = $(".ui-dialog").css('background-image');
defaultCss.border = $(".ui-dialog").css('border');
defaultCss.backgroundColor = $(".ui-dialog").css('background-color');
},
close: function () {
YouTubeDialog.html('');
$(".ui-dialog-titlebar").show();
$(".ui-dialog").css({
'background-image': defaultCss.backgroundImage,
'border': defaultCss.border,
'background-color': defaultCss.backgroundColor
});
}
});
}

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

//Format YouTube URL
YouTubeURL = window.location.protocol + "//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({ //reset width and height
width: 'auto',
height: 'auto'
});
YouTubeDialog.dialog({
minWidth: options.width,
minHeight: options.height,
title: videoTitle
});
YouTubeDialog.dialog('open');
$(".ui-widget-overlay").fadeTo('fast', options.overlayOpacity); //set Overlay opacity
$titleBar = $(".ui-dialog-titlebar");
if (options.hideTitleBar && options.modal) { //hide Title Bar (only if Modal is enabled)
$titleBar.hide(); //hide Title Bar
$(".ui-widget-overlay").click(function () { //automatically assign Click event to overlay
YouTubeDialog.dialog("close");
});
}
if (options.clickOutsideClose && options.modal) { //assign clickOutsideClose event only if Modal option is enabled
$(".ui-widget-overlay").click(function () {
YouTubeDialog.dialog("close");
});
}
$titleBar.removeClass("ui-corner-all").addClass("ui-corner-top"); //only round the top corners on titlebar
if (!options.showBorder) {
$(".ui-dialog").css({
'background-image': 'none',
'border': 'none',
'background-color': 'transparent'
});
}
event.preventDefault();
});
}
});
},
destroy: function () {
return this.each(function () {
$(this).unbind(".YouTubePopup");
$(this).removeData('YouTube');
});
}
};

function getYouTubePlayer(URL, width, height) {
var YouTubePlayer = '<iframe title="YouTube video player" style="margin:0; padding:0;" width="' + width + '" ';
YouTubePlayer += 'height="' + height + '" src="' + URL + '" frameborder="0" allowfullscreen></iframe>';
return YouTubePlayer;
}

function setYouTubeTitle(id) {
$.ajax({
url: window.location.protocol + '//query.yahooapis.com/v1/public/yql',
data: {
q: "select * from json where url ='http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=" + id + "&format=json'",
format: "json"
},
dataType: "jsonp",
success: function (data) {
if (data && data.query && data.query.results && data.query.results.json) {
YouTubeDialog.dialog({
title: data.query.results.json.title
});
}
}
});
}

function getYouTubeIdFromUrl(youtubeUrl) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
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': 'YouTubeDialog',
'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',
'showBorder': true
};
})(jQuery, window);
</script>

Anda baru saja membaca artikel tentang - Kode jQuery youtube Popup Player Plugin. Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)