簡単に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をダウンロード

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく