PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

指定した動画を切替表示（テキストリンク）

指定した動画を切替表示（サムネイル付きリンク）

ギャラリー

お気に入り登録している動画フィードを取得して表示してみました。
設置サンプルのソース

<!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="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" />
      <!-- JS -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.youtubeplaylist.js"></script>
      <script type="text/javascript">
         $(function(){
            $("ul#demo1").ytplaylist();
            $("ul#demo2").ytplaylist({
               addThumbs:true,
               autoPlay:false,
               holderId:'ytvideo2'
            });
             $.getJSON(
                 "http://gdata.youtube.com/feeds/api/users/cocoism3/favorites",
                 {
                    alt:"json"
                 },
               function(xml) {
                   var feed = xml.feed;
                   var s='';
                   $.each(feed.entry, function(i,item){
                      var tmp=item.id.$t.split("videos/");
                      var vid=tmp[tmp.length-1];
                      s+='<li><a href="http://www.youtube.com/watch?v='+vid+'"></a></li>';
                   });
                    $("ul#demo3").append(s).ytplaylist({
                     addThumbs:true, 
                     autoPlay:false, 
                     playerWidth:'240',
                     playerHeight:'180',
                     thumbSize:'small',
                     showInline:true
                  });
               }
            );
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
#ytvideo,
#ytvideo2 {
    float:left;
   margin-right:10px;
}
.yt_holder {
    background:#f3f3f3;
    padding:10px;
    float:left;
    border:1px solid #e3e3e3;
   margin-bottom:15px;
}
.yt_holder ul {
    float:left;
    margin:0;
    padding:0;
    width:220px;
}
.yt_holder ul li {
    list-style-type:none;
    display:block;
    background:#f1f1f1;
    float:left;
    width:216px;
    margin-bottom:5px;
   padding:2px;
}
.yt_holder ul li img {
    width:120px;
    float:left;
    margin-right:5px;
    border:1px solid #999;
}
.yt_holder ul li a {
    font-family:georgia;
    text-decoration:none;
    display:block;
    color:#000;
}
.yt_holder .currentvideo {
   background:#e6e6e6;
}

.yt_holder3 ul {
    margin:0; padding:0;
    list-style:none;
}
.yt_holder3 ul li {
    width:240px;
    height:180px;
     list-style:none;
   float:left;
    margin:0 10px 10px 0; padding:0;
    overflow:hidden;
    background:#e5e5e5;
}
.yt_holder3 ul li a {
    text-decoration:none;
    display:block;
    border:none;
}
.yt_holder3 ul li img {
    border:none;
    width:240px; height:180px;
}
.yt_holder3 .currentvideo {
   background:#bbb;
}
      </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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <h1>設置サンプル</h1>
      <p>参照：<a href='http://www.micc.unifi.it/ferracani/blog/web-applications/jquery-youtube-playlist-plugin/' target='_blank'>jQuery Youtube playlist plugin</a></p>
<!-- CODE -->
      <h2>指定した動画を切替表示（テキストリンク）</h2>
      <div class="yt_holder">
         <div id="ytvideo"></div>
         <ul id="demo1">
            <li><a href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a></li>
            <li><a href="http://www.youtube.com/watch?v=GILIk8W00s4">布団にもぐるところ</a></li>
            <li><a href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a></li>
         </ul>
      </div>
      <br clear="all" />
      <h2>指定した動画を切替表示（サムネイル付きリンク）</h2>
      <div class="yt_holder">
         <div id="ytvideo2"></div>
         <ul id="demo2">
            <li><a href="http://www.youtube.com/watch?v=8e_wXc0m97w">うろうろ</a></li>
            <li><a href="http://www.youtube.com/watch?v=GILIk8W00s4">布団にもぐるところ</a></li>
            <li><a href="http://www.youtube.com/watch?v=9YEEl52u8XE">寝てるとこ</a></li>
         </ul>
      </div>
      <br clear="all" />
      <h2>ギャラリー</h2>
      <p>お気に入り登録している動画フィードを取得して表示してみました。</p>
      <div class="yt_holder3">
          <ul id="demo3"></ul>
      </div>
      <br clear="all" />
<!-- / CODE -->
   </body>
</html>