OK, I got it working. It took me longer than I'd thought. First view the demo HERE (http://mesdomaines.nu/playlists/youtube_player.html). I hope this is what you want.
Here are the files, except for playlist3.html. I'll post it separately because the message will be too long otherwise.
youtube_player.html (the main page):
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Multiple playlists with thumbnails</title>
<style>
a{color: white; text-decoration: none}
</style>
<body style="background: black; color: white; font-family: verdana; font-size: 12px; overflow: hidden">
<div style="position: absolute; left: 0px; top:10px; right: 0px; text-align: center">
<a href="javascript: void(0)" onclick="frames.youtube.location.replace('playlist1.html')">Playlist 1</a>
<a href="javascript: void(0)" onclick="frames.youtube.location.replace('playlist2.html')">Playlist 2</a>
<a href="javascript: void(0)" onclick="frames.youtube.location.replace('playlist3.html')">Playlist 3</a>
</div>
<div style="position: absolute; left: -2px; top: 40px; right: 0px; bottom: 0px">
<iframe name="youtube" style="position: absolute; width:100%; height: 100%; background: black" src="go_to_playlists.html" frameborder="0"></iframe>
</div>
</body>
</html>
playlist1.html:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script type="text/javascript">
function load_video(which)
{
frames['my_videos'].location.replace('http://www.youtube.com/embed/'+which+'?rel=0&autoplay=1&showinfo=0&start=0&autohide=0&modestbranding=1');
}
</script>
</head>
<body style="font-family: verdana; font-size:12px; background: black" onload="if(top.location==document.URL){window.location.replace('youtube_player.html')}"><div>
<!-- VIDEO CONTAINER. Just an example of loading / replacing videos without flicker in IE. Document.write the iframes if you want validation for a strict doctype -->
<div style="position: absolute; left:120px; top: 20px; right: 120px; bottom: 110px; border: 1px solid white">
<iframe name="my_videos" src="http://www.youtube.com/embed/ZRfWU-ZpLZ8?rel=0&autoplay=0&showinfo=0&start=0&autohide=0&modestbranding=1" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0" allowTransparency onload="document.getElementById('smooth_transition').style.visibility='hidden'"></iframe>
</div>
<div style="position: absolute; left:120px; top: 2px; background:black; color: white">Playlist 1: Ancient Times</div>
<!-- smooth transition -->
<div id="smooth_transition" style="position: absolute; left:120px; top: 20px; right: 120px; bottom: 110px; border:1px solid white; background:black; z-index:100; visibility: visible; "></div>
<!-- Stop button -->
<div style="position: absolute; top: -5px; right: 115px;cursor: pointer; padding: 5px; background: black; color: white" onclick="document.getElementById('smooth_transition').style.visibility='hidden'; frames['my_videos'].location.replace('go_to_playlists_or_thumbnails.html'); ">Stop video</div>
<!-- PLAYLIST -->
<!-- We have 4 thumbnails. Each thumbnail's width equals 80px. Suppose we only want to explicitly show 3 thumbnails. Then the width of the outermost div for the playlist must equal 3x80=240px. The width of the innermost div must ewqual 4x80=230px. -->
<div style="position: absolute;bottom: 5px;left: 50%; margin-left: -150px; width: 240px; overflow-x: auto; overflow-y: hidden; border:1px solid gray; ">
<div style="position:relative; width: 320px">
<a style="float: left" onclick="load_video('ZRfWU-ZpLZ8')"><img src="http://img.youtube.com/vi/ZRfWU-ZpLZ8/1.jpg" height="80" width="80" title="prehistoric 1" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
<a style="float: left" onclick="load_video('TUliLKSJ4bQ')"><img src="http://img.youtube.com/vi/TUliLKSJ4bQ/1.jpg" height="80" width="80" title="prehistoric 2" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
<a style="float: left" onclick="load_video('FUPca8xaIc4')"><img src="http://img.youtube.com/vi/FUPca8xaIc4/1.jpg" height="80" width="80" title="prehistoric 3" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
<a style="float:left" onclick="load_video('rIM1glECugU')"><img src="http://img.youtube.com/vi/rIM1glECugU/2.jpg" height="80" width="80" title="From earliest life to modern humans" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
</div>
</div>
</div></body>
</html>
playlist2.html:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script type="text/javascript">
function load_video(which)
{
frames['my_videos'].location.replace('http://www.youtube.com/embed/'+which+'?rel=0&autoplay=1&showinfo=0&start=0&autohide=0&modestbranding=1');
}
</script>
</head>
<body style="font-family: verdana; font-size:12px; background: black" onload="if(top.location==document.URL){window.location.replace('youtube_player.html')}"><div>
<!-- VIDEO CONTAINER. Just an example of loading / replacing videos without flicker in IE. Document.write the iframes if you want validation for a strict doctype -->
<div style="position: absolute; left:120px; top: 20px; right: 120px; bottom: 110px; border: 1px solid white">
<iframe name="my_videos" src="http://www.youtube.com/embed/PVSrH2pN2zw?rel=0&autoplay=0&showinfo=0&start=0&autohide=0&modestbranding=1" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0" allowTransparency onload="document.getElementById('smooth_transition').style.visibility='hidden'"></iframe>
</div>
<div style="position: absolute; left:120px; top: 2px; background:black; color: white">Playlist 2: Music by Grieg</div>
<!-- smooth transition -->
<div id="smooth_transition" style="position: absolute; left:120px; top: 20px; right: 120px; bottom: 110px; border:1px solid white; background:black; z-index:100; visibility: visible; "></div>
<!-- Stop button -->
<div style="position: absolute; top: -5px; right: 115px;cursor: pointer; padding: 5px; background: black; color: white" onclick="document.getElementById('smooth_transition').style.visibility='hidden'; frames['my_videos'].location.replace('go_to_playlists_or_thumbnails.html'); ">Stop video</div>
<!-- PLAYLIST -->
<!-- We have 4 thumbnails. Each thumbnail's width equals 80px. Suppose we only want to explicitly show 3 thumbnails. Then the width of the outermost div for the playlist must equal 3x80=240px. The width of the innermost div must ewqual 4x80=230px. -->
<div style="position: absolute;bottom: 5px;left: 50%; margin-left: -150px; width: 240px; overflow-x: auto; overflow-y: hidden; border:1px solid gray; ">
<div style="position:relative; width: 320px">
<a style="float: left" onclick="load_video('PVSrH2pN2zw')"><img src="http://img.youtube.com/vi/PVSrH2pN2zw/1.jpg" height="80" width="80" title="Grieg: Two Elegiac Melodies" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
<a style="float: left" onclick="load_video('ax3tdHwqvvo')"><img src="http://img.youtube.com/vi/ax3tdHwqvvo/2.jpg" height="80" width="80" title="Grieg: Norwegian Dances" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
<a style="float: left" onclick="load_video('O0iLAmvZ1ZE')"><img src="http://img.youtube.com/vi/O0iLAmvZ1ZE/1.jpg" height="80" width="80" title="Grieg: Piano Concerto" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
<a style="float:left" onclick="load_video('bRrPVJxIyGg')"><img src="http://img.youtube.com/vi/bRrPVJxIyGg/2.jpg" height="80" width="80" title="Grieg: Holberg Suite - Rigaudon" alt="" style="cursor: pointer; padding:0px; margin: 0px"></a>
</div>
</div>
</div></body>
</html>
go_to_playlists.html:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body style="background: black; color: white; font-family: verdana; font-size: 12px" onload="if(top.location==document.URL){window.location.replace('youtube_player.html')}">
<div style="position: absolute; left: 49%; top: 50%; margin-left:-80px">
Choose a playlist (links on top)
</div>
</body>
</html>
go_to_playlists_or_thumbnails.html:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body style="background: black; color: white; font-family: verdana; font-size: 12px" onload="if(top.location==document.URL){window.location.replace('youtube_player.html')}">
<div style="position: absolute; left: 39%; top: 50%; margin-left:-2px;">
Choose a playlist (top) or a thumbnail (bottom)
</div>
</body>
</html>
If for some reason the visitor stumbles on a file other than the main page (youtube_player.html), he/she will be automatically redirected to the main page. So starting with playlist1.html, for instance, will not show this page 'in isolation'.
These pages should be tested online (live), as certain browsers may show a strange behavior if the pages are tested locally (on the hard disk).
I hope I didn't produce any typos. playlist3.html and explanations below.
Arie.