18:08 - 02/10/2013

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;}
    &#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é 


Bình luận & Góp ý
  1. Thái ơi, cho mình hỏi tí, mình có thể lấy đoạn CODE này thành 1 list phim dc không, mình đang cố gắng tạo ra 1 phần mềm cho riêng mình ^^!

    Trả lờiXóa
  2. dc ban a, nhung code tren no chi danh cho video youtube thoi, kon video cho khac, m cung chua thu nua kia, hy

    Trả lờiXóa
  3. Cám ơn bạn nhé. Chúc bạn luôn thành công trong cuộc sống. Bài viết hay quá.

    Trả lờiXóa
  4. anh làm theo hướng dẫn, copy code ở trên nhưng nó không hiển thị ra em a. chỉ có hiển thị tên mấy video, còn cái hiển thị video đang phát thì ko thấy hiện ra, khi bấm vào video khác bên dưới thì nó nhẩy sang trang youtube.
    em có hướng dẫn nào khác thì gửi link cho anh với nhé. Tks em

    Trả lờiXóa
    Trả lời
    1. e đã sửa lại bài viết, a đọc lại phần ghi chú nhé và làm lại nhé

      Xóa
  5. làm cách nào để nó không tự động phát vậy bạn

    Trả lờiXóa
    Trả lời
    1. bạn sửa đoạn b.autoPlay&&(e="&autoplay=1");b., sửa autoplay=0

      Xóa
  6. sent me ...my friend template ...from indonesia email : woco88@gmail.com

    Trả lờiXóa
  7. Nếu muốn bỏ cái tên phía trên player thì làm sao bạn?

    Trả lờiXóa