A Youtube Video Gallery

The galleries below show Youtube-videos without 'the distractions'. So there are no related videos at the end of the videos, they don't show annoying ads etc.
The width/height of the videos is determined by the width and height of the boxes containing the video-thumbnails, but the videos have a maximize button allowing the user to make them 'full window'. Try the demos below before reading the info at the end of the page.

Music (6 videos)
Elgar:
Nimrod (1/6)
Playlist Holst: The Planets (2/6)
Bach: Violin Concerto No. 4 (3/6)
Liszt: Dante Symph. First Part (4/6)
Playlist Brahms: Hungarian Dances (5/6)
Playlist Brahms: Serenade No. 1 (6/6)


Wildlife (3 videos)
30 years of wildlife films
(1/3)
Playlist lions: who is the boss? (2/3)
Cougar vs Bear Cub (3/3)


The javascript

In the head:
<script src="http://www.youtube.com/player_api"></script>
<script src="video_gallery.js"></script> (click on the link to see what must be put inside the script)
<script src="reload_onresize.js"></script> (click on the link to see what must be put inside the script)
At the end of the body section:
<script src="reload_without_blinking.js"></script> (click on the link to see what must be put inside the script)


The HTML and CSS
(some styles are kept inline here for better comprehension; you can change parts of the code if you know what you are doing)

First we need the following general HTML at the beginning of the body section. It will prevent multiple videos from playing at the same time (don't change or remove!):
<div id="modal_layer" style="position: fixed; left:0; top:0; right:0; bottom:0; z-index:-1; background: black; opacity:0" onclick="if(this.style.zIndex>0)alert('Please close active video before continuing')"></div>

As for the general form of each gallery, we must specify a width and a height for its outer-div (the 'box') because these values are inherired by the (Youtube-iframes for the) videos. You can change the values for these dimensions. Best results for all devices are obtained by specifying the width in percentages and the height in pixels:
<div id="some_gallery_id" class="video_container" style="width: 45%; height: 360px; " onmouseover="video_div='some_gallery_id';">
<div style="text-align: center; background: black; color: white">Title of Gallery</div>
<div class="video_container_inner" >
Members of gallery here
</div>
</div>
You may change the ID for the outer-div (some_gallery_id here), in which case you should adapt the onmouseover. You cannot change the class for the outer-div (video_container) nor the class for the inner-div (video_container_inner)! You can create more than one gallery if you want, in which case each outer-div should have its unique ID.

The members of the gallery (images plus text above them; represented by the gray bar above) look like this (2 examples):
Single video:
<div class="inner_member" onclick="loadVideo('aqvOVGCt5lw'); info('<b>Elgar<\/b>: Enigma Variations - <i>Nimrod<\/i><br>London Symphony Orchestra, Colin Davis'); upl('4gT3c')">
<div class="video_title">Elgar: Nimrod</div>
<img src="http://img.youtube.com/vi/aqvOVGCt5lw/mqdefault.jpg" alt="" class="thumbnail_with_title" onload="size_thumbnail(this)">
</div>
This represents one possible member of a Youtube-gallery; you can (and probably will) have more members.
The outer-div must have class="inner_member".
Function loadVideo loads a Youtube-video (whose ID is aqvOVGCt5lw here). Function info puts info about the video on top of it (we need the back slashes if we use HTML inside the function) and function upl does ... nothing (so you can safely remove it, if you want). It's just there to give us the Youtube-ID of the person who uploaded the video to his/her channel. That's useful information, since it allows us to quickly find all the videos we've 'borrowed' from the person in case he / she terminates his / her Youtube account, or removes videos. (The videos won't be accessible anymore in that case, so we have to remove them from our gallery. But we can only remove them if we know how to find them in our gallery).
As for the div having class="video_title" (don't change or remove!), it puts info (here: Elgar: Nimrod) at the top of the image that loads the video when we click on it.
The image has src="http://img.youtube.com/vi/aqvOVGCt5lw/mqdefault.jpg, where aqvOVGCt5lw is the ID of the video. This kind of URLs automatically produce images corresponding to specific Youtube-video. You should not change the class name (thumbnail_with_title) for the images.
The onload inside the img-tag ensures that the image-link for the video (plus text) has the proper dimensions (the more text, the smaller the image). If you want all thumbnails inside a box to have the same size, you must make sure that the text above the thumbnails (= the text inside the div having class="video_title") needs the same number of lines (2 lines, in our demos).

Playlist
<div class="inner_member" onclick="loadPlaylist('OlY-c84HPSA', 'VqQEu6MUvq0, Xvx4wDNqXnE, cSmpTSlkfsM, tKUx4ZkMUPA, IUJ9hxHR3-Q, KMdA8hKH-As, hedDugzfRrs'); info('PLAYLIST:<br><b>Brahms<\/b>: <i>Serenade No. 1 in D, Op. 11<\/i><br>Leonard Slatkin, St. Louis Symph. Orch.'); upl('musicanth')">
<div class="video_title" >Playlist Brahms: Serenade No. 1</div>
<img src="http://img.youtube.com/vi/OlY-c84HPSA/mqdefault.jpg" alt="" class="thumbnail_with_title" onload="size_thumbnail(this)">
</div>
Instead of function loadVideo loading one single video, we now have function loadPlaylist loading more than one video, meaning that this function has several parameters corresponding to different Youtube-IDs. We can freely choose one of them for the src of the image-link. Note the syntax for loadPlaylist: the first video of the playlist has its own quote marks, all the other videos only have them as a set.

Start and end points for the videos

The script for the Youtube gallery only allows start and end points for single videos. Syntax: something like loadVideo('aqvOVGCt5lw',100,130), where 100 and 130 denote the start point and the end point (in seconds), respectively, of the video. When the video has finished playing (at 130 here), a click on one of the native Youtube restart buttons will play the entire video, not the 'chopped' one.

Using the galleries on mobile devices

If the value we specify for the height of (the outer-div of) a gallery is smaller than the vertical space needed by all of its members together, we must scroll the gallery. To allow "momentum" style scrolling for the gallery on iOS, use this CSS:
body{height: 100%; overflow: auto; margin: 0; -webkit-overflow-scrolling: touch;}.

Responsiveness

If we want videos to be responsive (no black horizontal or vertical bars), we must give them a certain width-height ratio. But in this gallery, the size of the videos is determined by the dimensions chosen for the box in which we put the thumbnails for the videos (or by the dimensions of the main window, in the case of maximized videos). So our videos may sometimes have black horizontal or vertical bars.


That's it, enjoy
Arie Molendijk, mesdomaines.nu