Note: April 15th, 16 v1.2 to fix iOS devices not loading videos

Description: Youtube Video Gallery is a responsive video gallery script for selecting from a playlist of Youtube videos to play from on your site. Thumbnails are automatically generated for each video and shown at the bottom of the main player. Mobile and desktop friendly, Youtube Video Gallery/Slider supports the following cool features:

• Easy to set up- simply enter a list of Youtube video IDs, and the script generates a gallery out of the videos.
• Thumbnails for each video are automatically generated and shown inside a scrollable interface beneath the player.
• Fully responsive and mobile friendly interface. Video Gallery automatically conforms to the size of its container while maintaining a 16:9 aspect ratio.
• Ability to set if the player should automatically play a video within the gallery when the page loads.
• Ability to set whether player should slide through and play each video within the playlist automatically, similar to a slider.

Showcasing and playing a selection of YouTube Videos on your site is now a simple affair thanks to this script!

Demo:

• Gallery set to auto play 1st video

• Gallery set to slide through and play each video automatically

---

Directions:

Step 1: Insert the following code in the HEAD section of your page

Select All
<link rel="stylesheet" href="ddvideogallery.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="ddvideogallery.js"> /*********************************************** * Youtube Video Gallery script - (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script>

The code above references the following external files (right click/ select "Save As"):

1. ddvideogallery.css
2. ddvideogallery.js

By default, upload these files to the same directory as where your webpage resides.

Step 2: Insert the below sample markup and initialization code following it into the BODY section of your page where you wish the video gallery to appear:

Select All
<div id="videojukebox" class="ddvideoGallery"> <div class="videoWrapper"></div> <div class="videoNav"></div> </div> <script> <!-- // initialize video gallery after markup above var myvideogallery = new ddyoutubeGallery({ sliderid: 'videojukebox', selected: 0, // default selected video within playlist (0=1st, 1=2nd etc) autoplay: 1, // 0 to disable auto play, 1 to enable autocycle: 1, // 0 to disable auto cycle, 1 to auto cycle and play each video automatically playlist: [ // list of youtube video IDs. It's the last segment within a shareable Youtube URL 'SbQc_JLUH7k', 'fzrfrXhE-w4', 'ROipDjNYK4k', '8ZRLlyxvr6E', 'wEKLEeY_WeQ', 'O_yVo3YOfqQ', 'piH5_aP0fY8' ] }) //-> </script>

And that's it for installation! Read on for my details on how to customize the gallery.

Gallery Initialization

The initialization code that jump starts the gallery is contained in the code of Step 2, following the markup. It looks something like this:

<script>
<!--
var myvideogallery = new ddyoutubeGallery({
	sliderid: 'videojukebox',
	selected: 0, // default selected video within playlist (0=1st, 1=2nd etc)
	autoplay: 1, // 0 to disable auto play, 1 to enable
	autocycle: 1, // 0 to disable auto cycle, 1 to auto cycle and play each video automatically
	playlist: [ // list of youtube video IDs. It's the last segment within a shareable Youtube URL
		'O_yVo3YOfqQ',
		'fzrfrXhE-w4',
		'ROipDjNYK4k',
		'8ZRLlyxvr6E',
		'wEKLEeY_WeQ',
		'O_yVo3YOfqQ',
		'piH5_aP0fY8' //<no comma after last video!
	]
})
//->
</script>

We call new ddyoutubeGallery() to jump start an instance of Youtube Video Gallery (you can have more than 1 instance),  and assign it to an unique but arbitrary variable, in the above case, myvideogallery.

Inside ddyoutubeGallery(), we pass an object literal containing the various settings for YouTube Gallery. They are:

• sliderid: The ID of the main Youtube Gallery DIV container, such as "videojukebox".

• selected: An integer setting the video within the playlist that should be selected by default (0=1st video, 1=2nd etc). In combination with the autoplay setting, it defines which video (if any) should automatically play when the page loads.

• autoplay: Boolean variable setting whether the video gallery should automatically play the selected video when the page loads. Note: Autoplay is disabled on certain mobile platforms and browser combinations such as Chrome and Safari mobile to conserve battery. This setting has no effect in those cases.

• autocycle: Boolean variable on whether to play each video in the playlist automatically and sequentially when autoplay is set to true.

• playlist:[]:  An array of YouTube videos' IDs to play. The ID of a Youtube video is the last segment of a shareable Youtube URL, such as the part in red in the following URL https://youtu.be/tp5hgjD_Y5g

Again ddyoutubeGallery() should always be called AFTER the markup for Gallery.

Customizing the gallery style

The markup for a Youtube Video Gallery looks like the following

<div id="videojukebox" class="ddvideoGallery">
	<div class="videoWrapper"></div>
	<div class="videoNav"></div>
</div>

The default style for the gallery is defined inside ddvideogallery.css, which creates a fluid main container that expands to fit the entire width of its parent element. The height of the gallery changes automatically based on its width to always maintain a 16:9 ratio, the dimensions of most Youtube videos. The gallery is also mobile friendly in its layout out of the box. Refer to the comments inside ddvideogallery.css to understand and modify any aspect of the gallery style.