4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
August 24, 2016, 07:53:04 PM

Login with username, password and session length
Search:     Advanced search
Follow 4images on twitter: Click here to follow!
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  General / Allgemeines
| |-+  Programming
| | |-+  Adding Youtube Movies in a Pop Up Window
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Current Topic Rating: *****
Author Topic: Adding Youtube Movies in a Pop Up Window  (Read 20102 times)
2balls
Pre-Newbie

Offline Offline

Posts: 3

Thank You
-Given: 1
-Receive: 0


View Profile
« 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>

1
2
3
4
5
6
<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.

1
<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.

1
<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 » Logged
azndeb888(banned)
Newbie
*
Offline Offline

Posts: 10

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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
Logged

REMOVED
2balls
Pre-Newbie

Offline Offline

Posts: 3

Thank You
-Given: 1
-Receive: 0


View Profile
« 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 » Logged
Ecollin
Pre-Newbie

Offline Offline

Posts: 1

Thank You
-Given: 0
-Receive: 0


View Profile
« 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.
Logged
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.265 seconds with 19 queries.
Post your comments here