YouTubeで特定のユーザーがアップした動画を検索して表示。動画のサムネイルをクリックすると、「prettyPhoto」で動画をオーバーレイ表示します。
※IE9対応:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script> <!-- prettyPhoto --> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/prettyPhoto3.1.4/css/prettyPhoto.css" /> <script src="/content/lib/jquery/prettyPhoto3.1.4/js/jquery.prettyPhoto.js"></script> <script type="text/javascript"> $(function() { var isIE=false; if(navigator.userAgent.toLowerCase().indexOf("msie")!=-1) isIE=true; if(isIE){ var url="http://gdata.youtube.com/feeds/api/videos?lr=ja&author=cocoism3&alt=json-in-script&callback=getList"; var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(script); //$("head").append(script); これはだめ }else{ $.getJSON( "http://gdata.youtube.com/feeds/api/videos", { author:"cocoism3", alt:"json" }, 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){ $('#load').fadeOut(); var feed = xml.feed; var s=''; $.each(feed.entry, function(i,item){ var tmp=item.id.$t.split("video:"); var vid=tmp[tmp.length-1]; // prettyPhoto s+='<a href="'+item.link[0].href+'" rel="prettyPhoto[youtube]"><img src="'+item.media$group.media$thumbnail[0].url+'" /></a>'; }); $("#demo").append(s); $("a[rel^='prettyPhoto']").prettyPhoto({ social_tools:"", theme:"dark_square", autoplay:false, /* 自動再生しない */ slideshow:false, /* スライドショー無効 */ default_width:640, default_height:400, hideflash:true, iframe_markup: '<iframe width="{width}" height="{height}" src="{path}" frameborder="0" allowfullscreen></iframe>' }); } </script> <!-- CSS --> <style type="text/css"> #demo { margin:0; padding:0; clear:both; float:none; overflow:hidden; } #demo a { margin:10px; padding:0; display:block; width:96px; height:72px; float:left; } #demo a img { width:96px; height:72px; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>YouTubeで特定のユーザーがアップした動画を検索して表示。動画のサムネイルをクリックすると、「<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto" target="_blank">prettyPhoto</a>」で動画をオーバーレイ表示します。</p> <p>※IE9対応: <meta http-equiv="X-UA-Compatible" content="IE=8" /> <!-- CODE --> <h3>☆cocoism3がアップした動画☆</h3> <div id="load"><img src='/content/img/ajax/loadingIcon.gif'></div> <div id="demo"></div> <!-- / CODE --> </div> </body> </html>