Using thumbnails for playing multiple YouTube videos

**molendijk** · 03-19-2013, 01:04 AM

Using text links for playing (YouTube) videos is not always what website designers want, because the information contained in the text about the videos is not 'cool' or sufficient. That's why, on many sites, the links have the form of iframes looking like this:

Code:

<iframe style="width:160px; height: 145px;" src="http://www.youtube.com/embed/AVgbEkBWuqs?start=0&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large" frameborder="0" allowfullscreen></iframe>

But these 'iframe-links' have two major disadvantages:
- if we have many of them on our page, it won't load fast enough;
- if we make them too small (less than 220x220px), the videos won't play (message: 'video player is too small).

Using (YouTube) thumbnails for our purpose is a much better idea, because
(i) small images load faster than iframes,
(ii) the size of videos (loaded in a YouTube-iframe) doesn't depend on the size of the thumbnails.

YouTube thumbnails look like this:
http://img.youtube.com/vi/VIDEO-ID/0.jpg, or http://img.youtube.com/vi/VIDEO-ID/1.jpg or http://img.youtube.com/vi/VIDEO-ID/2.jpg or http://img.youtube.com/vi/VIDEO-ID/3.jpg.

So how can we use YouTube thumbnails for showing videos? Of course, we should not use the thumbnails for 'unhiding' hidden YouTube-iframes, because iframes (hidden or not) are a burden for loading time. What we should do is create a given iframe on the fly as soon as the thumnail corresponding to an iframe is clicked on.

I created a script that just does that: it creates videos on the fly. I added some css that interacts with the script in such a way that
(i) the thumbnails contain relevant text and
(ii) the iframes replace (sort of) the corresponding thumbnails when the user hits them. Any thumbnail that has been replaced with an iframe will reappear when the iframe is closed (all iframes contain a close button created by the script).

Demo and explanations here.

Arie Molendijk.