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" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.youtubeplaylist_custom.js" ></script>
      <script type="text/javascript">
          $(function() {
            $("#ytplist").ytplaylist({plistID:"AB5B3DE9830F41A5"});
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
#yt_holder {
   margin:0 auto; padding:0;
   width:520px;
   overflow:hidden;
}
#yt_holder h3 {
   text-align:center;
   font-size:120%;
   margin:10px auto; padding:5px 0;
   background:#ccc;
   border:2px solid #ccc;
}
#ytvideo {
   width:520px; height:323px;
   overflow:hidden;
   margin:0 auto; padding:0;
   background:#000;
}
#ytplist-container {
   position: relative;
   text-align: left;
   width:520px; height:120px;
   margin:10px auto; padding:0;
   overflow:hidden;
}
#ytplist-container a.prev,
#ytplist-container a.next {
   position:absolute;
   top:0px;
   width:17px; height:110px;
   overflow:hidden;
   text-indent:-9999px;
   background:transparent url(/content/img/strm/prev.png) no-repeat 0 0;
   display:block;
}
#ytplist-container a.next {
   background:transparent url(/content/img/strm/next.png) no-repeat 0 0;
   right:0;
}
#ytplist-container a.off {
   background-position:0 0;
   cursor:default;
}
#ytplist-container a.on {
   background-position:0 -110px;
   cursor:pointer;
}
#ytplist {
   position: relative;
   top:0; left:0;
   overflow: hidden;
   margin:0 0 0 19px; padding:0;
   width:500px;
}
#ytplist li {
   float:left;
   margin:0;
   padding:0;
   width:130px; height:110px;
   line-height:1;
   overflow:hidden;
   display: inline;
}
#ytplist li span {
   display:block;
   padding:5px;
   overflow:hidden;
   letter-spacing:-1px;
}
#ytplist li span a {
   font-size:80%;
   text-decoration:none;
}
#ytplist li a.thumb {
   position:relative;
   width:120px; height:68px;
   display:block;
   overflow:hidden;
   border:1px solid #ccc;
   text-indent:-9999px;
}
#ytplist li.current a.thumb {
   border:1px solid red;
}
#ytplist li a.thumb img {
   position: absolute;
   display: block;
   left: 0; top:-11px;
   width:120px;
   outline: none;
   -ms-interpolation-mode: bicubic;
}
      </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>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <h2>指定した再生リストを取得して表示</h2>
<!-- CODE -->
         <div id="yt_holder" class="cf">
            <h3></h3>
            <div id="ytvideo"></div>
            <div id="ytplist-container">
               <ul id="ytplist"></ul>
               <a href="#" class="prev off">←</a>
               <a href="#" class="next on">→</a>
            </div>
         </div><!-- #yt_holder -->
<!-- / CODE -->
      </div>
   </body>
</html>