4images Forum & Community

General / Allgemeines => Programming => Topic started by: 2balls on February 22, 2010, 12:11:16 PM

Title: Adding Youtube Movies in a Pop Up Window
Post by: 2balls on February 22, 2010, 12:11:16 PM
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.

Code: [Select]
<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>

Code: [Select]
<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.

Code: [Select]
<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.

Code: [Select]
<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.

Title: Re: Adding Youtube Movies in a Pop Up Window
Post by: azndeb888 on February 26, 2010, 07:39:02 AM
do you know how to add this to wordpress post?  it doesn't seem to read the javascript
Title: Re: Adding Youtube Movies in a Pop Up Window
Post by: 2balls on February 26, 2010, 10:17:46 AM
I no this works in html documents. For adding pop ups to word press try looking here..

lynk.de/wordpress/videopop

I googled > pop up video wordpress

Hope this helps
Title: Re: Adding Youtube Movies in a Pop Up Window
Post by: Ecollin on December 05, 2010, 10:22:05 AM
This is no brainer work. If you start doing it yourself, you will know how exactly it is done.