Youtubeから指定したユーザーの動画を一覧で表示させる

enqueue.php

//作成したjsファイルを読み込む。
//WordPressの場合は以下のように読み込む。
wp_enqueue_script('getytlist_js', THEME_WEB_ROOT . '/library/js/jquery.getytlist.js');

jquery.getytlist.js

(function($) {
    $.fn.getytlist = function(options){
      var defaults = $.extend({
        author: 'ytuser', //Youtubeユーザー名
        maxresults: 3 //最大取得件数
      }, options);

      var setting = $.extend(defaults, options);

      var isIE=false;
      if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true;
      //IE
      if(isIE){
          var url="http://gdata.youtube.com/feeds/api/videos?lr=ja&author=" +setting.author+ "&alt=json-in-script&callback=getList&max-results=" +setting.maxresults+ "";
          var script = document.createElement("script");
          script.setAttribute("type", "text/javascript");
          script.setAttribute("src", url);
          document.getElementsByTagName("head")[0].appendChild(script);
      }else{
      //IE以外
        $.getJSON(
          "http://gdata.youtube.com/feeds/api/videos",
          {
              "author": setting.author,
              "orderby":'published',
              "alt":"json",
              "max-results": setting.maxresults 
          },
          function(xml) {
              getList(xml);
          }
        );
      }

      //日付フォーマット
      var formatDate = function(dateString) {
        var dary=dateString.split("-");
        var year=dary[0];
        var month=dary[1];
        var day=dary[2].substring(0,2);
        return year+"年"+month+"月"+day+"日";
      }
      //3桁区切り
      function addFigure(str) {
        var num = new String(str).replace(/,/g, "");
        while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
        return num;
      }
      //リスト作成
      function getList(xml){
        var feed = xml.feed;
        var ua = navigator.userAgent;
        var i=0;

        //モバイルの場合はiframeで表示する
        if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('iPad') > 0) {
          $.each(feed.entry, function(i,item){

            //youtubeIDを取り出す
            var tmp=item.id.$t.split("video:");
            var vid=tmp[tmp.length-1];
            var substr ='/';
            var index = vid.lastIndexOf(substr);
            var ytid = vid.substr(index+1);
            var ytdescription = item.content.$t;
            var s='';

            //1件目だけ説明を表示
            if (i==0){
              s+='<div class="yt-title">'+item.title.$t+'</div>';
              s+='<iframe width="300" height="150" src="http://www.youtube.com/embed/'+ytid+'?rel=0&hd=1&showinfo=0&theme=dark&color=red&autohide=1" frameborder="0" allowfullscreen></iframe>';
              s+='<div class="yt-info">';
              s+=ytdescription;
              s+='</div>';
            } else if (i>=1 && i<12){
              //1件目から12件目まではサムネイル表示
              s+='<div class="yt-title">'+item.title.$t+'</div>';
            } else if (i>13){
              //13件目以降はテキストリンクにする
              s+='<aside class="video-link yt-link"><a href="http://www.youtube.com/watch?v='+ytid+'">'+item.title.$t;
              s+='</a></aside>';
            }
            

            if (i>=1 && i<12){
              s+='<iframe width="300" height="150" src="http://www.youtube.com/embed/'+ytid+'?rel=0&hd=1&showinfo=0&theme=dark&color=red&autohide=1" frameborder="0" allowfullscreen></iframe>';
            }

            if (i>=0 && i<12){
              //1件目にスタイル適用させるためにクラス名をつける
              if (i==0){
                $("#ytarticle").append('<article class="yt-thumb yt-mostrecent yt-link">'+s+'</article>');
              } else {
                $("#ytarticle").append('<article class="yt-thumb yt-list yt-link">'+s+'</article>');
              }
            } else if (i>13){
              //13件目以降はテキストリンクのみ
              $("#ytarticle").append(s);
            }
            
          });
          //件数カウント
          i = i+1;

        }else{
        //PCの場合はmagnific popupで表示する
          $.each(feed.entry, function(i,item){

            //youtubeIDを取り出す
            var tmp=item.id.$t.split("video:");
            var vid=tmp[tmp.length-1];
            var substr ='/';
            var index = vid.lastIndexOf(substr);
            var ytid = vid.substr(index+1);
            var ytdescription = item.content.$t;
            var s='';

            //1件目だけ説明を表示
            if (i==0){
              s+='<div class="yt-title">'+item.title.$t+'</div>';
              s+='<a class="video" href="http://www.youtube.com/watch?v='+ytid+'"><img class="ytthumb" src="http://i.ytimg.com/vi/'+ytid+'/mqdefault.jpg"></a>';
              s+='<div class="yt-info">';
              s+=ytdescription;
              s+='</div>';
            } else if (i>=1 && i<12){
              //1件目から12件目まではサムネイル表示
              s+='<div class="yt-title">'+item.title.$t+'</div>';
            } else if (i>13){
              //13件目以降はテキストリンクにする
              s+='<aside class="video-link yt-link"><a href="http://www.youtube.com/watch?v='+ytid+'">'+item.title.$t;
              s+='</a></aside>';
            }
            

            if (i>=1 && i<12){
              s+='<a class="video" href="http://www.youtube.com/watch?v='+ytid+'"><img class="ytthumb" src="http://i.ytimg.com/vi/'+ytid+'/mqdefault.jpg"></a>';
            }

            if (i>=0 && i<12){
              //1件目にスタイル適用させるためにクラス名をつける
              if (i==0){
                $("#ytarticle").append('<article class="yt-thumb yt-mostrecent yt-link">'+s+'</article>');
              } else {
                $("#ytarticle").append('<article class="yt-thumb yt-list yt-link">'+s+'</article>');
              }
            } else if (i>13){
              //13件目以降はテキストリンクのみ
              $("#ytarticle").append(s);
            }
            
          });
          //件数カウント
          i = i+1;

          $('.yt-link').matchHeight();

          //magnificPopup設定
          $('.yt-thumb').find('a.video').magnificPopup({
            //delegate: 'a:not(".play")',
            type: 'iframe',
            disableOn: 480,
            iframe: {
              markup: '<div class="mfp-iframe-scaler">'+
              '<div class="mfp-close"></div>'+
              '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
              '<div class="mfp-title">Some caption</div>'+
              '</div>'
            },
            gallery: {
              enabled:true
            },
            callbacks: {
              markupParse: function(template, values, item) {
                  values.title = item.el.attr('title');
              }
            }
          });
        }
      }
      return true;
    }
})(jQuery);

page.html

<!--ytarticle要素にyoutube一覧が表示される-->
<div id="ytarticle"></div>

<script>
jQuery(document).ready(function($) {
  $('#ytarticle').getytlist({
    author: 'ytuser', //Youtubeユーザー名
    maxresults: 3 //最大取得件数
  });
});
</script>