How to Display a YouTube Video Gallery Using jquery.youtubeGallery.js｜DAD UNION

Let’s explore how to display multiple YouTube videos in a gallery using jquery.youtubeGallery.js. Thumbnails of the main YouTube videos are displayed, and clicking on the thumbnails below switches the main YouTube video.

CSS for Displaying the YouTube Video Gallery

* Load the jquery.youtubeGallery.css file. Please modify as needed.

<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 for Displaying the YouTube Video Gallery Using jquery.youtubeGallery.js

* Load the jquery-2.2.0.min.js and jquery.youtubeGallery.js files. Use $().youtubeGallery() to specify the location and size for displaying the YouTube video gallery, as well as the YouTube URLs.

<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', // Width of the video
        height: '320', // Height of the video
        speed: '1000', // Speed of the fade
		// YouTube URLs
        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 for Displaying the YouTube Video Gallery

* Please modify as needed.

<div class="clWrap">

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

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


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