FF2+ IE9+ Opera 9+

YouTube Gallery Wall

Author: Dynamic Drive

Last modified: April 15th, 16 v1.1 to fix iOS devices sometimes not loading videos

Description: Displaying a bunch of Youtube videos on your page just got super simple! Youtube Gallery Wall transforms a UL element containing links to Youtube videos into a "wall" of video thumbnails. Moving your mouse over each thumbnail (or tapping on a mobile devices) gives you the option to play the video inside a lightbox, or optionally go to another page, such as the corresponding Youtube page associated with the video.

Youtube Gallery Wall is responsive, and by default displays 4 columns of thumbnails, dwindling down to 3 and 2 columns based on the width of the browser window. This can easily be changed inside the .css file. You can have as many Youtube "walls" on the page as possible, each with possible different dimensions, such as a main gallery wall and side bar gallery wall on the same page.

Demo:


Directions: Developer's View

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

Select All

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

  1. youtubegallerywall.css
  2. youtubegallerywall.js

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

Step 2: Insert the below sample markup into the BODY section of your page where you wish the video gallery wall to appear:

Select All

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

More Information

To set up a Youtube Gallery Wall, first, define a UL list containing links to the desired videos, for example:

<ul id="youtubelist">
<li><a href="https://www.youtube.com/watch?v=iC_v67yeNXQ" data-url="http://dynamicdrive.com/dynamicindex17/youtube-video-gallery.htm">Responsive Youtube Video Gallery</a></li>
<li><a href="https://www.youtube.com/watch?v=gBJl1ODksNU">Best of Trance 2012</a></li>
<li><a href="https://youtu.be/oIlIVFBBbNw">Pigeons Animation</a></li>
<li><a href="https://youtu.be/KWFfDyupGpQ">Who's Your Favorite</a></li>

</ul>

Each LI element should contain a A element with the following information:

  •  A href attribute referencing a valid Youtube shareable URL, such as https://youtu.be/oIlIVFBBbNw or https://www.youtube.com/watch?v=iC_v67yeNXQ This will be the video the generated thumbnail will play when clicked on.

  • An optional "data-url" attribute pointing to any corresponding web page the video is associated with. If defined, the thumbnail will display an icon inside its interface next to the "play" button that allows the user to click on and be transported to this page instead of playing the video.

The anchor text inside each link is also optional, and has no effect on the rendering of each thumbnail.

Initializing a Gallery Wall

Once the markup for a gallery wall has been defined, simply initialize it by calling the jQuery function:

$(galleryULref).youtubegallery()

after the DOM has loaded, where galleryULref is a jQuery reference to the UL element containing the Youtube links, for example:

<script>

jQuery(function(){ // on DOM load
	//syntax $(selector).youtubegallery()
	$('#youtubelist').youtubegallery()
})

</script>

If you wish to initialize multiple Gallery Walls, you can give each UL a shared CSS class name, and initialize them all at once using:

$('.sharedulclass').youtubegallery()

Changing the thumbnail images' quality

The script automatically pulls each video's jpg thumbnail from Youtube, which has a default size of 480x360. The thumbnail format used is defined near the top inside youtubegallerywall.js:

var thumbnailformat = 'http://img.youtube.com/vi/VIDEOID/0.jpg'

Youtube also offers three other thumbnail versions you can use instead:

  • http://img.youtube.com/vi/VIDEOID/mqdefault.jpg (320 x 180)

  • http://img.youtube.com/vi/VIDEOID/1.jpg (120 x 90)

  • http://img.youtube.com/vi/VIDEOID/2.jpg (120 x 90)

  • http://img.youtube.com/vi/VIDEOID/3.jpg (120 x 90)

Customizing the gallery style

The Gallery Wall style is defined inside youtubegallerywall.css, and is separated into two sections: 1) The style of the thumbnails, and 2) The style of the video lightbox. One area where you may wish to modify from the get go is the following selector:

ul.youtubewall li{
width: 25%; /* by default, show 4 columns of thumbnails */
float: left;
display: inline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px; /* general spacing between thumbnails */
margin-bottom: 8px; /* bottom spacing between thumbnails */
}

Here you can modify everything from the default number of thumbnail columns to show (25% = 4 columns), to the general and bottom spacing between each thumbnail. To change the number of columns to show when the browser or device width shrinks to a particular width or below, change the "media queries" section near the end of the CSS file.

The icons used inside the thumbnail interface is courtesy of FontAwesome; to change the icon to something else, simply change the CSS class names highlighted in red inside the following line of the youtubegallerywall.js file to something else:

+ '<div class="panel"><div class="panelinner"><i class="play fa fa-play-circle-o"></i> <a class="externallink fa fa-external-link-square" href="' + doclink +'"></a></div></div>'