Using thumbnails for playing multiple YouTube videos
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 (view source to see how it's done):
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 (click on the link above to see what I mean).
Using (YouTube) thumbnails for our purpose is a much better idea, because (i) small images load faster than iframes and (ii) the size of our 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 hidden iframes are a burden for loading time (see above). 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 thumbnails are replaced with iframes 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: click on the thumbnails to the right (they have: position: relative; float: right) and on the tumbnail to the left (position: relative)
GRIFFES Bacchanale for orchestra
►
GRIFFES Clouds for orchestra
►
Huber: Piano Concerto No. 3 - First Movement Dan Franklin Smith (piano), Michail Jurowski, Stuttgart Philh. Orch.
Also, put HTML-lines like the following in the body (this is just an example of a thumbnail used for showing an iframe that loads a YouTuve video with ID=AVgbEkBWuqs):
<div id="some_div" class="yt_container" style="position: relative; float: right; ">
<div class="yt_text" >Your text for the thumbnail</div>
<img id="some_div_img" class="yt_image" src="http://img.youtube.com/vi/AVgbEkBWuqs/1.jpg" alt="" title="Click arrow to play the video" >
<div class="arrow" onclick="play_youtube('player_for_some_div', 'AVgbEkBWuqs', '280px'); player_width('player_for_some_div', '400px'); conform_styles('player_for_some_div','some_div')" > ►</div><br>
<div id="player_for_some_div" class="the_player" ></div>
</div> Blue: the IDs for the required divs. Red: you can replace this with position: relative or position: relative; float: left or position: absolute (whatever suits you). Darkred: the iframe's height (you may change this). Green: the iframe's width (you may change this). DON'T CHANGE THE CLASS NAMES!.
Positioning the thumbnails:
We should not give the container-div for the thumbnails (= the div having class="yt_container") other styles than position: relative, position: relative; float:left, position:relative; float: right and position: absolute. Now you may think that restricts the position of the thumbnails to the left and the right of the page. But what if we want to put them at some distance from the left or the right of the page? There's a simple solution. We wrap the thumbnail in a 'super-div' that can be given the required styles. For instance, if we want to center a thumbnail (horizontally), we give the 'super-div': position: relative (or: absolute); left: 50%; margin-left: -80px; width: 160px (because the thumbnails are '160px' wide, see the styles). Demo:
The Neanderthals
►
The HTML for this thumnail is:
<div style="position: relative; left: 50%; margin-left: -80px; width:160px">
<div id="neanderthal" class="yt_container" style="position: relative; ">
<div class="yt_text" ><br>The Neanderthals</div>
<img id="neanderthal_img" class="yt_image" src="http://img.youtube.com/vi/ZRfWU-ZpLZ8/1.jpg" alt="" title="Click arrow to play the video" >
<div class="arrow" onclick="play_youtube('player_for_neanderthal', 'ZRfWU-ZpLZ8', '300px'); player_width('player_for_neanderthal', '370px'); conform_styles('player_for_neanderthal','neanderthal')" > ►</div><br>
<div id="player_for_neanderthal" class="the_player" ></div>
</div>
</div>
Free the iframe:
Our thumbnails pass their 'float' and other styles to the corresponding iframes. But we might want to give the iframes more freedom, so to say, by allowing them to have a horizontal position that is different from the thumbnail's horizontal position. There's some need for this, since we want the iframes to be wider than their corresponding thumbnails. We can obtain 'horizontal iframe-reposition' by dynamically changing the iframe's left position with the help of a function called change_position. Here's an example:
<div style="position: relative; left: 50%; margin-left: -80px; width:160px">
<div id="neanderthal2" class="yt_container" style="position: relative; ">
<div class="yt_text" >The Neanderthals<br> are here to stay</div>
<img id="neanderthal2_img" class="yt_image" src="http://img.youtube.com/vi/No_Id8H4dv8/0.jpg" alt="" title="Click arrow to play the video" >
<div class="arrow" onclick="play_youtube('player_for_neanderthal2', 'No_Id8H4dv8', '300px'); player_width('player_for_neanderthal2', '370px'); conform_styles('player_for_neanderthal2','neanderthal2'); change_position('player_for_neanderthal2', '-100px')" > ►</div><br>
<div id="player_for_neanderthal2" class="the_player" ></div>
</div>
</div>
In this example, the negative value ('-100px') in function change_position pushes the iframes 100 pxs to the left. The result:
The Neanderthals are here to stay
►
Finally: right floating iframes in IE7-8:
IE7 and IE8 don't correctly float iframes that have float: right. I created a fix that doesn't affect non-IE and that - for that reason - should be applied to all thumbnails-plus-corresponding-iframes if we don't want to leave IE7-8 users in the cold. We must simply put this line AFTER conform_styles (...):
fix_float_right(PLAYER_ID). where PLAYER_ID is the ID we have in the div with class="the_player". Example:
<div id="yet_another_div" class="yt_container" style="position: relative; float: right; ">
<div class="yt_text" >Your text for the thumbnail</div>
<img id="yet_another_div_img" class="yt_image" src="http://img.youtube.com/vi/AVgbEkBWuqs/1.jpg" alt="" title="Click arrow to play the video" >
<div class="arrow" onclick="play_youtube('player_for_yet_another_div', 'AVgbEkBWuqs', '280px'); player_width('player_for_yet_another_div', '400px'); conform_styles('player_for_yet_another_div','yet_another_div'); fix_float_right('player_for_yet_another_div') " > ►</div><br>
<div id="player_for_yet_another_div" class="the_player" ></div>
</div>
