Đã 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;}- Chèn tiếp đoạn code sau trên </head>
।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;}
<script type='text/javascript'>- Chèn tiếp đoạn code sau vào nơi bạn cần hiển thị
//<![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>
<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>
- 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é
