jquery.youtubeGallery:YouTube動画のギャラリーを表示するJs



複数指定したYouTube動画URLで動画ギャラリーを表示してみます。

メイン動画と動画のサムネイルが表示され
サムネイルをクリックするとメイン動画が切替ります。

1.CSSの記述例

<link rel="stylesheet" type="text/css" href="jquery.youtubeGallery.css" />
<style type="text/css" media="all">
<!--
.ytg_player {
    margin : 0 0 1px;
}
.ytg_thumbnails img {
    margin : 0 1px 5px 1px;
    height : 50px;
}
-->
</style>

2.読込むJsファイルとJavaScriptの記述例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.youtubeGallery.js"></script>
<script type="text/javascript">
jQuery(function( $ ) {
    $('#youtube').youtubeGallery( {
        width: '480', // 動画の幅
        height: '320', // 動画の高さ
        speed: '1000', // フェードのスピード
		// YouTubeのURL
        urls:['http://www.youtube.com/watch?v=AbPED9bisSc',
		'http://www.youtube.com/watch?v=WA4iX5D9Z64',
		'http://www.youtube.com/watch?v=AAbokV76tkU',
		'http://www.youtube.com/watch?v=fWNaR-rxAic',
		'http://www.youtube.com/watch?v=T4cdfRohhcg',
		'http://www.youtube.com/watch?v=AgFeZr5ptV8',
		'http://www.youtube.com/watch?v=Y1xs_xPb46M']
    } );
} );
</script>

3.HTMLの記述例

<div align="center" id="youtube"></div>

YouTube動画のギャラリーを表示するデモ

ソース元:jquery.youtubeGallery.js

途中からYouTubeで見るかリンクさせれば良くない?
って思っちゃいました。