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

jquery.youtubeGallery.jsを使って複数のYouTube動画をギャラリーを表示してみます。
メインYouTube動画のサムネイルが表示され、下のサムネイルをクリックするとメインYouTube動画が切替ります。

Contents

YouTube動画ギャラリーを表示するCSSの記述
jquery.youtubeGallery.jsを使ってYouTube動画ギャラリーを表示するJavaScriptの記述
YouTube動画ギャラリーを表示するHTMLの記述
YouTube動画のギャラリーを表示するデモページ
ソース元：jquery.youtubeGallery.js

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>

jquery.youtubeGallery.jsを使ってYouTube動画ギャラリーを表示するJavaScriptの記述

※jquery-2.2.0.min.js、jquery.youtubeGallery.jsファイルを読み込みます。$().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>

YouTube動画ギャラリーを表示するHTMLの記述

※必要に応じて変更して下さい。

<div class="clWrap">

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

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


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