jquery.youtubeGallery.jsを使ってYouTube動画ギャラリーを表示する方法｜DAD UNION

今回は、jQueryプラグインのjquery.youtubeGallery.jsを使用して、複数のYouTube動画をギャラリー形式で表示する方法をご紹介します。
このプラグインを利用することで、メインのYouTube動画と、その下に表示されるサムネイルをクリックすることでメイン動画が切り替わる仕組みを簡単に実装できます。

Contents

準備
CSSの設定
JavaScriptの設定
HTMLの設定
YouTube動画のギャラリーを表示するデモページ
ソース元：jquery.youtubeGallery.js
まとめ

準備

まずは、必要なCSSとJavaScriptファイルを準備します。以下のファイルをダウンロードしてプロジェクトに追加してください。

jquery-2.2.0.min.js
jquery.youtubeGallery.js

　
また、プラグインのCSSファイル（jquery.youtubeGallery.css）も用意します。

CSSの設定

次に、YouTube動画ギャラリーを表示するためのCSSを設定します。jquery.youtubeGallery.cssファイルを読み込み、必要に応じてカスタマイズしましょう。

<link rel="stylesheet" type="text/css" href="jquery.youtubeGallery.css" />
<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:800px;
	margin:0 auto;
}
.ytg_player {
    margin : 0 0 1px;
}
.ytg_thumbnails img {
    margin : 0 1px 5px 1px;
    height : 50px;
}
-->
</style>

JavaScriptの設定

次に、JavaScriptを設定します。jquery-2.2.0.min.jsとjquery.youtubeGallery.jsを読み込み、YouTube動画ギャラリーを表示させたい場所にJavaScriptコードを記述します。
$().youtubeGallery()でYouTube動画ギャラリーを表示させたい箇所とサイズ・YoTubeのURLを指定します。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></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:['https://www.youtube.com/watch?v=AbPED9bisSc',
		'https://www.youtube.com/watch?v=WA4iX5D9Z64',
		'https://www.youtube.com/watch?v=AAbokV76tkU',
		'https://www.youtube.com/watch?v=fWNaR-rxAic',
		'https://www.youtube.com/watch?v=T4cdfRohhcg',
		'https://www.youtube.com/watch?v=AgFeZr5ptV8',
		'https://www.youtube.com/watch?v=Y1xs_xPb46M']
    } );
} );
</script>

HTMLの設定

最後に、HTMLを設定します。以下のHTMLコードを使用して、YouTube動画ギャラリーを表示する要素を作成します。

<div class="clWrap">

	<h1>URLを指定したYouTube動画のギャラリーを表示します。<br>
    サムネルをクリックするとメイン動画が切替ります。</h1>

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


</div><!--/clWrap-->