Forget about my previous post if you don't want youtube to show suggested videos at the end. Use this instead:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>YouTube Demo</title>
<style>
body {font-family: arial; font-size: 13px; padding:0px; margin: 0px; background: #dedede; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// This part of the script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
var controllable_player,
statechange = function(e){
if(e.data === 0){controllable_player.stopVideo()}
};
function onYouTubeIframeAPIReady() {
controllable_player = new YT.Player('controllable_player', {events: {'onStateChange': statechange}});
}
if(window.opera){
addEventListener('load', onYouTubeIframeAPIReady, false);
}
setTimeout(function(){
if (typeof(controllable_player) == 'undefined'){
onYouTubeIframeAPIReady();
}
}, 3000)
</script>
<script>
function load_video(url, sstart, eend)
{
start=sstart; end=eend;
maximize();
//$('#the_container').hide(0);$('#the_container').slideToggle(4000)
$('#the_container').fadeIn(4000)
document.getElementById('controllable_player').style.height='100%';
if(controllable_player.unMute)setTimeout("controllable_player.unMute()",100);
uurl=url;
setTimeout("if(controllable_player.loadVideoById){controllable_player.loadVideoById('IBRqwnGferM', 0, 'large')}",0)
setTimeout("controllable_player.loadVideoById({'videoId': uurl, 'startSeconds': start, 'endSeconds': end, 'suggestedQuality': 'large'})",6000)
document.getElementById('stop').style.display='block'
document.getElementById('info').style.display='block'
document.getElementById('info').innerHTML=info
}
function load_playlist(url_playlist)
{
maximize();
//$('#the_container').hide(0);$('#the_container').slideToggle(4000)
$('#the_container').fadeIn(4000)
document.getElementById('controllable_player').style.height='100%';
if(controllable_player.unMute)setTimeout("controllable_player.unMute()",100);
uurl_playlist=url_playlist;
setTimeout("controllable_player.loadVideoById('IBRqwnGferM')",0);
setTimeout("controllable_player.loadPlaylist(uurl_playlist)",6000);
setTimeout("controllable_player.setPlaybackQuality('large')",6000)
document.getElementById('stop').style.display='block'
document.getElementById('info').style.display='block'
document.getElementById('info').innerHTML=info
}
function unload_video()
{
//$('#the_container').slideToggle(3000)
$('#the_container').hide(4000)
if(controllable_player.seekTo)controllable_player.seekTo(0);
if(controllable_player.stopVideo)controllable_player.stopVideo();
if(controllable_player.mute)controllable_player.mute();
setTimeout("if(controllable_player.pauseVideo)controllable_player.loadVideoById('IBRqwnGferM')",3950)
document.getElementById('stop').style.display='none'
document.getElementById('info').style.display='none'
}
function maximize()
{
document.getElementById('the_container').style.left='240px';
document.getElementById('the_container').style.top='10%';
document.getElementById('the_container').style.right='160px';
document.getElementById('the_container').style.bottom='20%';
}
</script>
</head>
<body >
<div style="position: absolute; left: 240px; top: 10%; right: 160px; bottom: 13%; background: #333232; color: white; ">
<div style="position: absolute; top: 50%; left: 50%; margin-left:-80px">Select a video at the left</div>
</div>
<div style="position: relative; top: 10px; text-align: center; font-size:30px">YouTube Demo</div>
<div id="the_container" style="display:none;position: absolute; left:140px; top: 140px; right: 140px; bottom: 140px; z-index:20; border: 0px solid red"><div style="position:absolute;z-index:8; width: 100%; height:0px; margin-top: 2px"><div id="stop" style="float: right; background: darkred; color: white; font-family: verdana; font-size: 14px; font-weight: bold; cursor: pointer" onclick="unload_video()"> X </div></div><div id="info" style="background:darkred; border: 0px solid silver; border-right: 0px;border-bottom: 0px; width: 100%; color: white; position: absolute; z-index:7; height:50px; text-align: center; padding-top: 10px; padding-bottom: 5px; font-family: arial; font-size:12px;overflow: auto">No info about video</div><br><br><br><iframe id="controllable_player" name="controllable_player" style="position: absolute; height: 100%; width: 100%;z-index:20" src="http://www.youtube.com/watch_popup?v=IBRqwnGferM&vq=large" frameborder="0"></iframe></div>
<div style="position: absolute; left: 20px; top: 50%; margin-top: -200px; ">
<div style="position:relative; ">
<img src="http://i3.ytimg.com/vi/YpX9eFhV6kg/mqdefault.jpg" alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Homo habilis';load_video('YpX9eFhV6kg')">
</div>
<div style="position:relative; ">
<img src="http://i3.ytimg.com/vi/WVSbl-sNi5Y/mqdefault.jpg" alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Homo heidelbergensis (in German)<br>Starts at 50 secs, plays for 100 secs';load_video('WVSbl-sNi5Y', 50,150)">
</div>
<div style="position:relative; ">
<img src="http://i3.ytimg.com/vi/sHy9FOblt7Y/mqdefault.jpg" alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='The Neanderthal Flute';load_video('sHy9FOblt7Y')">
</div>
<div style="position:relative; ">
Playlist:<br>
<img src="http://i3.ytimg.com/vi/ZRfWU-ZpLZ8/mqdefault.jpg" alt="" title="Click to play video" style="position: relative; width: 160px; border: 1px solid black; cursor: pointer" onclick="info='Playlist';load_playlist('YpX9eFhV6kg,WVSbl-sNi5Y,sHy9FOblt7Y')">
</div>
</div>
</body>
</html>