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

Tweet

Đã 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;}
&#2404;yt-container {color:#333;line-height:1.5;font-size:12px;font-family:arial;background:#eee;
width:300px; /*&#273;&#7897; r&#7897;ng c&#7911;a ti&#7879;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 &amp; 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> 
- Chú ý: nếu các thao tác của bạn ở trên không đúng như demo, bạn vui lòng chèn thêm đoạn code sau trên </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
ThaiAiTi - chúc bạn thành công ! Và đây là trang nghe nhạc giải trí hay nhé, mọi người qua chơi nhé