youtubeギャラリーを作ってみました。

フォトギャラリーっぽいyoutubeプレイヤーを作ってみました。



↑こんな感じになります。劣化popeyeですｗ

※追記・いろいろバグ取り完了。
IEってOSによって動きがちょっと違うの？みたいな気分。
画像ロード中のバグ解消。

では早速使い方を。

まず、表示させたい場所に好きなidでdiv要素を作ります。

<div id="好きなID"></div>

例を挙げると、こんな感じです。

<div id="ytptest"></div>

次に、フリープラグインにプラグイン詰め合わせをインポート。もう既に使ってくれている方は飛ばしてください。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/82/e0/10015494343.css"></script>

さらに、次のコードを追加します。

<script type="text/javascript">
jQuery(function(){
jQuery("#さっきつけたID").meat18ytp(["表示したい動画のyoutubeID","表示したい動画のyoutubeID","表示したい動画のyoutubeID"],通常時の幅,動画再生時の幅);
});
</script>

例を挙げると、こんな感じです。

<script type="text/javascript">
jQuery(function(){
jQuery("#ytptest").meat18ytp(["i9PqMLY39lg","uANkDyQdt0k","Kqi_LHMieDY","cEoVKczIjYE","zmDhenpIkwM","psRzgbKbLgA","guj5hIEU7JY","ilEH8e5cjjg","uaqPEhPIFWQ","RGV29b7skn0"],300,400);
});
</script>

動画の数は増やしても重くはなりませんので、どんどん追加しちゃってください！
最後にCSSを書き加えます。

.ytpouter {
background: #EFF9C7;
border: 1px solid #E1F1A1;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 10px 10px;
-moz-border-radius-bottomleft: 10px 10px;
-moz-border-radius-bottomright: 10px 10px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright: 10px 10px;
height: 180px;
width: 240px;
padding: 10px;
}
.ytpouter:hover{
-webkit-box-shadow: #CCC 0px 0px 7px;
-moz-box-shadow: #CCC 0px 0px 7px;
border: 1px solid #D5E68E;
}
.ytpstagewrap {
background: #0C3B3D;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright:5px 5px;
}
.ytpstage {
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 0px 0px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright:5px 5px;
overflow:visible;
position:relative;
background-repeat: no-repeat;
background-position:center center;
background-color:#0C3B3D;
}
.ytpstage .ytpnav{
background:#0C3B3D;
border-bottom-left-radius:5px 5px;
border-bottom-right-radius:5px 5px;
border-top-left-radius:0px 0px;
border-top-right-radius:0px 0px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft:0px 0px;
-moz-border-radius-topright:0px 0px;
height:32px;
left:0px;
padding: 5px;
position: absolute;
top: 0px;
width: 104px;
-ms-filter: "alpha( opacity=80 )";
filter: alpha( opacity=80 );
opacity: 0.8;
z-index:20;
}
.ytpstage .flag{
width:0px;
}
.ytpstage:hover .flag{
width:1px;
}
.ytpouter:hover .ytpnav{
}
.ytpnav a {
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 5px 5px;
display: block;
float: left;
height: 22px;
overflow: hidden;
padding: 5px;
text-indent: -900em;
}
.ytpprev {
background: url(http://stat.ameba.jp/user_images/20100823/22/mq24/68/8e/p/o0022002210710162312.png) no-repeat 50% 50%;
width: 22px;
}
.ytpplay{
background: url(http://stat.ameba.jp/user_images/20100823/22/mq24/89/3e/p/o0030002210710142054.png) no-repeat 50% 50%;
width: 30px;
}
.ytpnext {
background: url(http://stat.ameba.jp/user_images/20100823/22/mq24/f3/82/p/o0022002210710160483.png) no-repeat 50% 50%;
width: 22px;
}
.ytpnav a:hover {
background-color: #A1C436;
cursor: pointer;
}

ちょっと長いので、間違えないようにコピペしてくださいね。

popeyeというjQueryプラグインのインターフェースを真似して作りましたが、中身は別物です。
むしろ大分劣化していますが・・・ｗ
今回はブラウザチェックちゃんとやりましたので、気が向いたら使ってください～。