You can try something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
body {font-family: verdana; font-size:12px}
#video_container, #hider1, #hider2
{position:absolute; left:50%; top:50%; margin-top:-170px; margin-left:-176px; width: 352px; height:240px; overflow:hidden}
#hider1, #hider2{background:black;color:white; display:none;}
</style>
<script type="text/javascript">
function include_video_prep(url)
{
video='<object id="the_video" type="application/x-shockwave-flash" style="position:absolute;width:100%;height:100%;" data='+'"'+url+'"'+'><param name="movie" value='+'"'+url+'"'+'><param name="allowFullScreen" value="true"><param name="flashvars" value="autoplay=1"><param name="wmode" value="window"><param name="allowNetworking" value="all" ><param name="allowscriptaccess" value="always"><\/object>'
setTimeout("document.getElementById('video_container').innerHTML=video",0);
}
function include_video(which)
{
document.getElementById('hider1').style.display='block';
document.getElementById('hider2').style.display='block';
include_video_prep(which);
setTimeout("document.getElementById('hider1').style.display='none'; document.getElementById('hider2').style.display='none'",500);
}
</script>
</head>
<body ><div>
<div id="video_container"></div>
<div id="hider1">
<iframe style="position:absolute;width:100%;height:100%;" src="http://www.youtube.com/apiplayer" frameborder="0"></iframe>
</div>
<div id="hider2" ></div>
<div style="position:absolute; top:50%; left:50%; margin-top:90px; margin-left: -225px">
Click on a link ->
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/1CZpRG4oMms?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Fiddler</a>
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/g32oijfkhH4?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Errol</a>
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/jUvcyyU7UB4?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Arkansas</a>
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/vt4X7zFfv4k?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Soccer</a>
<a href="javascript: void(0)" onclick="include_video('http://www.youtube.com/v/Wz1W_omigwg?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')">Spooky</a>
<a href="javascript: void(0)" onclick="document.getElementById('video_container').innerHTML=''">Hide</a>
</div>
</div></body>
</html>
The styles are just examples. I made it so that there's no flicker on video-transition.
The links have the following form:
onclick="include_video('http://www.youtube.com/v/1CZpRG4oMms?version=3&rel=0&autoplay=1&showinfo=0&start=0&autohide=0')"
where the red part is the ID of a YouTube video.
I hope this helps.
===
Arie.