JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

準備

まずは、必要な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-->

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

設定が完了したら、デモページを作成して動作を確認しましょう。以下のリンクからデモページを確認できます。

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

ソース元:jquery.youtubeGallery.js

ソース元:jquery.youtubeGallery.js

まとめ

今回は、jquery.youtubeGallery.jsを使用して、複数のYouTube動画をギャラリー形式で表示する方法をご紹介しました。このプラグインを利用することで、簡単に魅力的な動画ギャラリーを作成することができます。是非、プロジェクトに取り入れてみてください。

この記事が皆さんのプロジェクトの参考になれば幸いです。さらに詳細な情報やカスタマイズ方法については、公式ドキュメントや他のリソースも併せてご覧ください。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。