Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Youtubeから指定したユーザーの動画を一覧で表示させる
//作成したjsファイルを読み込む。
//WordPressの場合は以下のように読み込む。
wp_enqueue_script('getytlist_js', THEME_WEB_ROOT . '/library/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);
<!--ytarticle要素にyoutube一覧が表示される-->
<div id="ytarticle"></div>
<script>
jQuery(document).ready(function($) {
$('#ytarticle').getytlist({
author: 'ytuser', //Youtubeユーザー名
maxresults: 3 //最大取得件数
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment