• Adding Youtube Movies in a Pop Up Window 5 0 5 1
Currently:  

Author Topic: Adding Youtube Movies in a Pop Up Window  (Read 34563 times)

0 Members and 1 Guest are viewing this topic.

Offline 2balls

  • Pre-Newbie
  • Posts: 3
    • View Profile
Adding Youtube Movies in a Pop Up Window
« 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.

« Last Edit: March 02, 2010, 11:35:50 AM by 2balls »

Offline azndeb888

  • Newbie
  • *
  • Posts: 10
  • great image platform!
    • View Profile
    • led grow lights
Re: Adding Youtube Movies in a Pop Up Window
« Reply #1 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

Offline 2balls

  • Pre-Newbie
  • Posts: 3
    • View Profile
Re: Adding Youtube Movies in a Pop Up Window
« Reply #2 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
« Last Edit: February 26, 2010, 01:44:22 PM by 2balls »

Offline Ecollin

  • Pre-Newbie
  • Posts: 1
    • View Profile
Re: Adding Youtube Movies in a Pop Up Window
« Reply #3 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.