Adding a video pop up window for your Youtube or Google videos is fairly simple. Doing the following will add a text link that will launch a video in its own window.
Working Example: mrbof.com/index.php?template=videos
1. You first need this simple script to open a popup window and insert the video. Just copy this to the <head> section of your web page.
So the Below script should be between <head> and </head>. If you do not have this in your page code add it.
<script type="text/javascript">
var popvid = null; // will store the window reference
function popWin(divId) {
if (typeof(divId)=='string') { divId=document.getElementById(divId); }
if (!popvid||popvid.closed) {
popvid=window.open('','vidplayer','width=450,height=390,status=no');
}
popvid.document.body.style.backgroundColor='black';
popvid.focus();
popvid.document.body.innerHTML='<BR><center>'+divId.innerHTML+'</center>';
return false;
}
window.onunload=function() {
// if the user is navigating away from the page, check to see if we
// opened a video window and if we did, make sure it's closed.
if (popvid) {
popvid.close();
}
}
</script>
2. We now need to wrap the embedded video in a division, This will make a simple style to hide the contents, making them invisible on the page. The id will also have to be unique. You can place the below code anywhere in you code but not in the <head>
<div id='popvid1'style='display: none'>
<embed style="width:400px; height:326px;" id="VideoPlayback"
type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=7066578568747223192&autoplay=1"
flashvars=""> </embed>
</div>
This is just an ordinary video embed code copied and pasted from the video service (Google in this case) to your web page, and then wrapped in a simple<div> tag.
3. Now all that's left to do is to create the links that will reference the video! Place this code where you want the pop up link to be.
<A HREF="url here" onclick="return popWin('popvid1');" class=popup>picas</A>
The pop-up is called in the onclick event. Simply pass the name of the division which contains the video and when the user clicks on that link, the code will be activated. It's really that simple. Since popWin returns FALSE and that's passed back to the onclick event.
3a. If you would like to link the pop up window to an image use the follow instead of step 3.
<A HREF="url here" onclick="return popWin('popvid1');" class=popup" popvid1" <img border="0" src="img/popvid1.gif" alt="popvid1" width="150" height="123"</A>
Repeat steps 2 and 3 to add movies.