Membuat Multipel Youtube Player Menggunakan Jquery

Cara 1 (Manual) :

Contoh kode Jquery :

<div id='currentbigvid'>
<iframe allowfullscreen='allowfullscreen' frameborder='0' src='http://www.youtube.com/embed/EHkozMIXZ8w'/>
</div>

<div id='playlist'>

<ul>

<script>
//<![CDATA[
$(function() {
var $vid1 = "http://www.youtube.com/embed/j5-yKhDd64s";
var $vid2 = "http://www.youtube.com/embed/mwYTz9TNnAs";
var $vid3 = "http://www.youtube.com/embed/FyXtoTLLcDk";
var $vid4 = "http://www.youtube.com/embed/EHkozMIXZ8w";

var $text1 = "Eminem : Not Afraid";
var $text2 = "Eminem: Best Rapper?";
var $text3 = "Justin Timberlake: TKO";
var $text4 = "Eminem : Monster";

var vidid = $vid1.split("").reverse().join("");
var sub = vidid.split('/');
var result = sub[0];
$vid1 = result.split("").reverse().join("");

var vidid = $vid2.split("").reverse().join("");
var sub = vidid.split('/');
var result = sub[0];
$vid2 = result.split("").reverse().join("");

var vidid = $vid3.split("").reverse().join("");
var sub = vidid.split('/');
var result = sub[0];
$vid3 = result.split("").reverse().join("");

var vidid = $vid4.split("").reverse().join("");
var sub = vidid.split('/');
var result = sub[0];
$vid4 = result.split("").reverse().join("");

$("#vid1").attr("src","http://img.youtube.com/vi/"+$vid1+"/mqdefault.jpg").attr("class",$vid1);
$("#vid2").attr("src","http://img.youtube.com/vi/"+$vid2+"/mqdefault.jpg").attr("class",$vid2);
$("#vid3").attr("src","http://img.youtube.com/vi/"+$vid3+"/mqdefault.jpg").attr("class",$vid3);
$("#vid4").attr("src","http://img.youtube.com/vi/"+$vid4+"/mqdefault.jpg").attr("class",$vid4);

$("#text1").text($text1);
$("#text2").text($text2);
$("#text3").text($text3);
$("#text4").text($text4);

    $("#playlist li").click(function() {
var vidu = $(this).find('img').attr('class');
      $("#currentbigvid iframe").attr("src","http://www.youtube.com/embed/"+vidu);
$("#playlist li").removeClass('activevid');
$(this).addClass('activevid');
    });

});
//]]>
</script>



<li><div class='vidimg'><img id='vid1'/></div><div id='text1'/></li>
<li><div class='vidimg'><img id='vid2'/></div><div id='text2'/></li>
<li><div class='vidimg'><img id='vid3'/></div><div id='text3'/></li>
<li class='activevid'><div class='vidimg'><img id='vid4'/></div><div id='text4'/></li>
</ul>

</div>

Cara 2 (Automatic) :

contoh JQUERY kode :

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<style>
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
}
ul.videos
{
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
//<![CDATA[
function player2(idvid){
$("#ytplayer").empty();
$("#ytplayer").append('<iframe width="640" height="480" src="https://www.youtube.com/embed/'+idvid+'?autoplay=1" frameborder="0" allowfullscreen></iframe>');
}
//]]>
</script>
</head>
<body>

<div id="ytplayer"><h3>KLICK ON THE IMAGE TO PLAY !</h3></div>
<div id="ytthumb"></div>

<script type='text/javascript'>
//<![CDATA[
$(function() {
$(document).ready(function() {
html = ['<ul class="videos">'];
$.getJSON("https://www.googleapis.com/youtube/v3/search?q=gnr+full+album&order=rating&part=snippet&maxResults=14&key=YourGoogleKey&prettyPrint=true",function(datas) {
$.each(datas.items, function(i,datax) {
//var div_data = "<div ><a href='https://www.youtube.com/watch?v="+datax.id.videoId+"'>"+datax.snippet.title+"</a></div>";
//$(div_data).appendTo("#hasil");
html+='<li onclick="player2(\''+datax.id.videoId+'\');"><span class="titlec">'+datax.snippet.title.substr(0, 20)+'<img src="'+datax.snippet.thumbnails.medium.url+'" width="130" height="97" alt="'+datax.id.title+'"/></span></li>';
});
html+=('</ul><br style="clear: left;"/>');
$(html).appendTo("#ytthumb");
}
);
return false;
});
});
//]]>
</script>

</body>
</html>

Smoga bermanfaat.................!

Tips Trik Alfanetcell

Membuat Multipel Youtube Player Menggunakan Jquery