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&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&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>