Code Tạo playlist cho video youtube giống thaiaiti

Đã có nhiều bài giới thiệu về cách post video youtube dạng list, tuy nhiên với thủ thuật đó thường thì bên dưới video là ảnh thumbnail của các các video liên quan, điều này khó cho người dùng khi xem video. Điều đó sẽ gây khó khăn khi chúng ta post quá nhiều video trong list thì người dùng sẽ khó biết họ đang xem video nào? Với thủ thuật này thì chúng ta sẽ khắc phục được vấn đề đó và hơn nữa nó sẽ linh hoạt hơn, bạn có thể đặt chúng ở bất kì đâu trên blog

Trang giải trí xem phim Full HD - Nghe nhạc HOT, Thiết kế Web theo yêu cầu, Rip template blogspot
Chi tiết tại: http://www.thaiaiti.com/

Cách làm:

- Chèn đoạn code sau trên ]]></b:skin>

#ytplay {margin:0;padding:0 0 2px 0;border-bottom:1px solid #ccc;float: left;width: 438px;height: 280px;overflow: hidden;}
।yt-container {color:#333;line-height:1.5;font-size:12px;font-family:arial;background:#eee;
width:300px; /*độ rộng của tiện ích*/
border:1px solid #ccc;}
.yt-container ul{background: #eee;list-style-type:none;border:1px solid #ccc;margin:0;padding:5px 5px 12px 2px;height: 150px; overflow: auto;float: left;width: 429px;}
.yt-container ul li a{background:url(https://lh5.googleusercontent.com/-Fm9icK415H8/TzDtraRfvsI/AAAAAAAABro/HBht2Fug_g8/s15/pl.gif) no-repeat;color:#222;padding:0 0 0 19px;}
.yt-container ul li a:hover{background:url(https://lh4.googleusercontent.com/-HHQGhqe9Yv0/TzDuINfTfsI/AAAAAAAABsA/tru7N9t_6-k/s15/hoverpl.gif) no-repeat;color:#036b5d}
.yt-container ul li.currentvideo a{font-weight:bold;color:#c20404; background:url(https://lh4.googleusercontent.com/-PFFQGfP_K_c/TzDvEJJ3iSI/AAAAAAAABsY/yiIfVgwKneI/s15/cur.gif) no-repeat;padding:0 0 0 19px;}

- Chèn tiếp đoạn code sau trên </head>

<script type='text/javascript'>
//<![CDATA[
String.prototype.startsWith=function(b){return 0===this.indexOf(b)}; jQuery.fn.ytplaylist=function(b){return this.each(function(){function h(a){var c;c=""+('<object height="'+b.playerHeight+'" width="'+b.playerWidth+'">');c+='<param name="movie" value="http://www.youtube.com/v/'+a+e+f+g+'"> </param>';c+='<param name="wmode" value="transparent"> </param>';b.allowFullScreen&&(c+='<param name="allowfullscreen" value="true"> </param>');c+='<embed src="http://www.youtube.com/v/'+a+e+f+g+'"';b.allowFullScreen&&(c+=' allowfullscreen="true" ');c+='type="application/x-shockwave-flash" wmode="transparent" height="'+ b.playerHeight+'" width="'+b.playerWidth+'"></embed>';return c+"</object>"}function i(a){a=a.match("[\\?&]v=([^&#]*)");return a=a[1]}var d=$(this),e="",f="&rel=0",g="";b.theme&&(t="&theme=light");b.autoPlay&&(e="&autoplay=1");b.showRelated&&(f="&rel=1");b.allowFullScreen&&(g="&fs=1");d.children("li").each(function(){$(this).find("a").each(function(){var a=$(this).attr("href");a.startsWith("http://www.youtube.com")?($(this).addClass("yt-vid"),$(this).data("yt-id",i(a))):a.startsWith("http://youtu.be")?($(this).addClass("yt-vid"), a=a.substr(a.lastIndexOf("/")+1),$(this).data("yt-id",a)):$(this).addClass("img-link")})});d.children("li").children("a.yt-vid").click(function(){b.showInline?($("li.currentvideo").removeClass("currentvideo"),$(this).parent("li").addClass("currentvideo").html(h($(this).data("yt-id")))):($("#"+b.holderId+"").html(h($(this).data("yt-id"))),$(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo"),$(this).parent("li").addClass("currentvideo"));return!1});d.find("a.img-link").click(function(){var a= $("<img/>");a.attr({src:$(this).attr("href")}).css({display:"none",position:"absolute",left:"0px",top:"50%"});b.showInline?($("li.currentvideo").removeClass("currentvideo"),$(this).parent("li").addClass("currentvideo").html(a)):($("#"+b.holderId+"").html(a),$(this).closest("ul").find("li.currentvideo").removeClass("currentvideo"),$(this).parent("li").addClass("currentvideo"));setTimeout(function(){a.height()<a.width()?a.width(b.playerWidth).css("margin-top",parseInt(a.height()/-2,10)).css({height:"auto"}): a.css({height:b.playerHeight,width:"auto",top:"0px",position:"relative"});a.fadeIn()},100);return!1});b.addThumbs&&d.children().each(function(){var a=$(this).find("a:first"),c=$(this).text();if(a.hasClass("yt-vid")){var d="<img src='"+("small"==b.thumbSize?"http://img.youtube.com/vi/"+a.data("yt-id")+"/2.jpg":"http://img.youtube.com/vi/"+a.data("yt-id")+"/0.jpg")+"' alt='"+c+"' />";a.empty().html(d+c).attr("title",c)}else d=$("<img/>").attr("src",a.attr("href")),a.empty().html(d).attr("title",c)}); d.children("li:first-child").addClass("currentvideo").children("a").click()})};
//]]>
</script>
<script type="text/javascript">
$(function() {
$("ul.ytlist").ytplaylist({
playerWidth: 438,
playerHeight:280,
addThumbs: false,
thumbSize: 'small',
showInline: false,
showRelated: true,
theme:true,
allowFullScreen: true,
autoPlay: true, holderId: 'ytplay'});
});
</script>

- Chèn tiếp đoạn code sau vào nơi bạn cần hiển thị

<div id="playlistnhac-thaiaiti">
<div class="yt-container">
<div id="ytplay">
</div>
<ul class="ytlist">
<li class="currentvideo"><a class="yt-vid" href="http://www.youtube.com/watch?v=FBHlO4_0wR4">Hạnh Phúc Nơi Ấy - Ngô Phong</a></li>
<li><a class="yt-vid" href="http://www.youtube.com/watch?v=aXXb3dLtSoo">Vệt Nắng Cuối Trời - Hoàng Bách & Mie Nguyen</a></li>
<li><a class="yt-vid" href="http://www.nhaccuatui.com/bai-hat/hanh-phuc-noi-ay-thanh-thuan.XbXvBJfcOQee.html">HPNA</a></li>
<li><a class="yt-vid" href="http://www.blogger.com/Link%20c%E1%BB%A7a%20Video%204"> Tên phim 4 </a></li>
<li><a class="yt-vid" href="http://www.blogger.com/Link%20c%E1%BB%A7a%20Video%205"> Tên phim 5 </a></li>
<li><a class="yt-vid" href="http://www.blogger.com/Link%20c%E1%BB%A7a%20Video%206"> Tên phim 6 </a></li>
<li><a class="yt-vid" href="http://www.blogger.com/Link%20c%E1%BB%A7a%20Video%207"> Tên phim 7 </a></li>
<li><a class="yt-vid" href="http://www.blogger.com/Link%20c%E1%BB%A7a%20Video%208"> Tên phim 8 </a></li>
<li><a class="yt-vid" href="http://www.blogger.com/Link%20c%E1%BB%A7a%20Video%209"> Tên phim 9 </a></li>
</ul>
</div>
</div>