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.

Contents

CSS for Displaying the YouTube Video Gallery
JavaScript for Displaying the YouTube Video Gallery Using jquery.youtubeGallery.js
HTML for Displaying the YouTube Video Gallery
Demo Page for Displaying the YouTube Video Gallery
Source: jquery.youtubeGallery.js

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-->