Have Multiple Videos On One Page And Have Them Play Back In One Larger Player

[Tim@DIM]

I dont know if anyone has run into htis problem or is likely to,
but it something i needed to do so i figured id post it here for anyone who may find it interesting/ useful.

So for the video player functionality we have this div:

<div id='videoPlayback' style='width: 560px; height:315px; background-color: #000000;'><iframe src="http://player.vimeo.com/video/36788063?autoplay=1" width="560" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

which is controlled by this script:

<script type="text/javascript">
function playVideo(sourceId, targetId) {
   if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
   if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
   targetId.innerHTML=sourceId.innerHTML;
   return false;
}
</script>

now to set which videos load in this div:

<div id='selectDemo1' class="not-here" style='display: none'>
	<iframe src="http://player.vimeo.com/video/30886424?" width="560" height="315" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div> 

<div id='selectDemo2' class="not-here" style='display: none'>
	<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/b7_Hvgzyr2o?version=3&autoplay=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b7_Hvgzyr2o?version=3&autoplay=1&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Any number of videos can be used for this but you get the idea.

now to select the video to be watched currently in the playback div we use anchors:

<a href="#videoPlayback" onclick='return playVideo("selectDemo5","videoPlayback")'><img src="images/australia.png" width="240" height="135" /></a>