簡単にYouTubeの動画ギャラリーをWebページに掲載できるjQueryプラグイン「jquery.youtubeGallery.js」

ブログなどに複数のYouTube動画を掲載したい場合があると思います。そのようなとき、YouTubeの共有コードをコピーしてきて、そのままブログに貼り付けても良いですが、数が多くなるとどうしても重くなってしまいますし、見た目もスマートではありません。

そこで、フォトギャラリーのような感じでYouTubeの動画を簡単に、コンパクトに掲載できるjQueryプラグイン「jquery.youtubeGallery.js」を作成しました。

デモ

ダウンロード

jquery.youtubeGallery.jsをダウンロード

使い方

プラグインの読み込み

下記のコードを記述してjQueryとプラグインを読み込みます。head要素の中とかが良いと思います。

<link rel="stylesheet" type="text/css" href="/PATH/TO/jquery.youtubeGallery/jquery.youtubeGallery.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/PATH/TO/jquery.youtubeGallery/jquery.youtubeGallery.js"></script>

設定の記述

head要素の中などに、どの動画を掲載するか、サイズはどうするか、などの設定を記述します。

<script type="text/javascript">
jQuery(function( $ ) {
	// #youtubeに動画を埋め込む例
	$('#youtube').youtubeGallery( {
		width: '480', // 動画の横幅（半角数字）
		height: '320', // 動画の高さ（半角数字）
		speed: '1000', // フェードのスピード（半角数字）
		urls:['http://www.youtube.com/watch?v=IQyvOvS0S3g','http://www.youtube.com/watch?v=xZCbdpAZFxU','http://www.youtube.com/watch?v=G_W5acJWpBk','http://www.youtube.com/watch?v=Yi5xauapF5Q','http://www.youtube.com/watch?v=IXLf7BxV6T8'] // YouTubeの動画のURLのリスト
	} );
} );
</javascript>

YouTube動画のURLリストは、
[‘http://www.youtube.com/watch?v=xxxxx’, ‘http://www.youtube.com/watch?v=xxxxx’]
という形式で記述します。「v=xxxxx」の部分で判別しますので、異なる形式で記述しないように注意してください（普通にYouTubeの動画ページのURLをコピペすれば大丈夫かと思います）。

動画を埋め込む場所を記述

動画を掲載したい場所に、動画を埋め込むための場所を記述します。上記の設定の例だと「#youtube」に掲載するように指定してありますので、「<div id=”youtube”></div>」を記述します。

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

CSSでデザインを調整

以上を記述すると、下記のようなコードが自動的に埋め込まれます。

<div id="youtube">
	<div class="ytg_player">
		<iframe />
		<iframe />
	</div>
	<div class="ytg_thumbnails">
		<img />
		<img />
	</div>
</div>

「<iframe />>」はYouTube動画、「<img />>」はサムネイルです。ページ上部のデモでは、下記のようなCSSを適用しています。ご参考に。

.ytg_player {
	margin : 0 0 5px;
}
.ytg_thumbnails img {
	margin : 0 5px 5px 0;
	height : 50px;
}

ダウンロード

jquery.youtubeGallery.jsをダウンロード