Miscellaneous : Video Popup List / The JavaScript Source

General

If you have a number of videos to show off, a select list is a good option. Use this script to display videos in a popup window, using the video links from the list. This method saves a large amount of space on the page.

Notes

Created by: Patrick Hunlock
Web Site: http://www.hunlock.com/
Posted: September 17, 2008

Note: If "true" is added to the second argument, the video will appear over a gray screen:
<a href="http://www.video.com/link" onclick='return popVideo("vid2",true)'>A Nice Video</a>

Additional information can be found in this article.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: video.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Patrick Hunlock | http://www.hunlock.com/Licensed under: Public Domain
 */

function getElementsByClass (searchClass) {
  // This function returns an array of all HTML objects with the
  // specified className.  Tag is optional
  var returnArray = [];
  var els = document.getElementsByTagName('*');
  var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
  for (var i = 0; i < els.length; i++) {
    if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
  }
  return returnArray;
}

function popVideo(vid, darken) {
  // This function accepts a division ID (vid), either a string or the actual
  // object itself.   vid is mandatory.   darken is optional, if it's true
  // the page will be greyed out under the video.
  var videos = getElementsByClass('video');     // Get all the videos on the page.
  var isplaying=null;
  for(i=0; i<videos.length; i++) {              // Loop through all the videos
    if (videos[i].style.display=='block') {     // This video is playing
      isplaying=videos[i].id;                   // remember its name
      var tmp=videos[i].innerHTML;              // Get the division contents
      videos[i].innerHTML='';                   // destroy the contents
      videos[i].style.display='none';           // Terminate the video.
      videos[i].innerHTML=tmp;                  // rebuild the contents.
    }
  }
  // This handles the darkening of the background while a video is playing.
  // First we see if the dark layer exists.
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');          // Create the layer.
        tnode.style.backgroundColor='rgb(0, 0, 0)';     // Make it black.
        tnode.style.opacity='0.7';                      // Set the opacity (firefox/Opera)
        tnode.style.MozOpacity='0.70';                  // Firefox 1.5
        tnode.style.filter='alpha(opacity=70)';         // IE.
        tnode.style.zIndex='1';                         // Zindex of 50 so it "floats"
        tnode.style.position='absolute';                // Position absolutely
        tnode.style.top='0px';                          // In the top
        tnode.style.left='0px';                         // Left corner of the page
        tnode.style.overflow='hidden';                  // Try to avoid making scroll bars
        tnode.style.display='none';                     // Start out Hidden
        tnode.id='darkenScreenObject';                  // Name it so we can find it later
    tbody.appendChild(tnode);                           // Add it to the web page
    dark=document.getElementById('darkenScreenObject'); // Get the object.
  }
  dark.style.display='none';
  if ((isplaying==vid)||(/^close$/i.test(vid))) { return false; }
  if (typeof(vid)=="string") { vid=document.getElementById(vid); }
  if (vid&&typeof(vid)=="object") {
    if (darken) {
      // Calculate the page width and height
      if( window.innerHeight && window.scrollMaxY )  {
        var pageWidth = window.innerWidth + window.scrollMaxX;
        var pageHeight = window.innerHeight + window.scrollMaxY;
      } else if( document.body.scrollHeight > document.body.offsetHeight ) {
        var pageWidth = document.body.scrollWidth;
        var pageHeight = document.body.scrollHeight;
      } else {
        var pageWidth = document.body.offsetWidth + document.body.offsetLeft;
        var pageHeight = document.body.offsetHeight + document.body.offsetTop;
      }
      //set the shader to cover the entire page and make it visible.
      dark.style.width= pageWidth+'px';
      dark.style.height= pageHeight+'px';
      dark.style.display='block';
    }
    // Make the video visible and set the zindex so its on top of everything else
    vid.style.zIndex='100';
    vid.style.display='block';
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop)
      scrollTop = document.documentElement.scrollTop;
    else if (document.body)
      scrollTop = document.body.scrollTop;

    // set the starting x and y position of the video
    vid.style.top=scrollTop+Math.floor((document.documentElement.clientHeight/2)-(vid.offsetHeight/2))+'px';
    vid.style.left=Math.floor((document.documentElement.clientWidth/2)-(vid.offsetWidth/2))+'px';
  }
  return false;
}

// This portion will allow the video to be dragged and dropped

var savedTarget=null;   // The layer being moved
var orgCursor=null;     // The original mouse style so we can restore it
var dragOK=false;       // True if we're allowed to move the element under mouse
var dragXoffset=0;      // How much we've moved the element on the horozontal
var dragYoffset=0;      // How much we've moved the element on the verticle

function moveHandler(e){
  // This function moves the layer when the mouse is moved.
  // it's called automatically by the onmousemove handler
  if (e == null) { e = window.event }
  if (e.button<=1&&dragOK){
    savedTarget.style.left=e.clientX-dragXoffset+'px';
    savedTarget.style.top=e.clientY-dragYoffset+'px';
    return false;
  }
}

function cleanup(e) {
  // This is called when the user releases the mouse
  // it clears out the move and mouseup event handlers
  // and resets the cursor.
  document.onmousemove=null;
  document.onmouseup=null;
  savedTarget.style.cursor=orgCursor;
  dragOK=false;
  return false;
}

function dragHandler(e){
  // This is called when the user clicks on the page
  // It checks to see if the click happened over an
  // element with a class name of "video", if if it
  // did, it sets up move and mouseup handlers.
  var cursorType='-moz-grabbing';
  if (e == null) { e = window.event; cursorType='move';}
  var target = e.target != null ? e.target : e.srcElement;
  if (target.className=="video") {
    orgCursor=target.style.cursor;
    savedTarget=target;
    target.style.cursor=cursorType;
    dragOK=true;
    dragXoffset=e.clientX-parseInt(target.style.left);
    dragYoffset=e.clientY-parseInt(target.style.top);
    document.onmousemove=moveHandler;
    document.onmouseup=cleanup;
    return false;
  }
}

//This next line will call dragHandler whenever
//the user clicks the mouse button on the page.
//Draghandler will check to see if the mouse is over
//a layer with the classname of 'video' and if so
//set up the drag and drop events.
document.onmousedown=dragHandler;

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="video.js"></script>

Body

Paste this code into the BODY section of your HTML document


<h2>Check these videos</h2>
<ul>
  <li><a href="http://www.youtube.com/watch?v=LUcB-TLLg40" onclick='return popVideo("vid1")'>Alan Meckler, Chairman and Chief Executive Officer, Jupitermedia Corporation</a> [4:19]</li>
  <li><a href="http://www.youtube.com/watch?v=YRDtwcGrGyM" onclick='return popVideo("vid2")'>How to Install a Testing Server on Your PC</a> [10:16]</li>
</ul>


<!--  Place this at the bottom of your Web page, before the closing BODY tag.  -->

<div id='vid1' class='video' style='position: absolute; display: none; padding: 10px; background-color: #dfdbc3; border: 1px solid black'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LUcB-TLLg40&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/LUcB-TLLg40&autoplay=1" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="344"></embed>
</object>
<br><br>
<a href="#" onclick='return popVideo("close")' style='float: left; color: #000;'>» close window «</a>
</div>

<div id='vid2' class='video' style='position: absolute; display: none; padding: 10px; background-color: #dfdbc3; border: 1px solid black'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/YRDtwcGrGyM&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/YRDtwcGrGyM&autoplay=1" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="344"></embed>
</object>
<br><br>
<a href="#" onclick='return popVideo("close")' style='float: left; color: #000;'>» close window «</a>
</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

1. From: Tejinder Singh
About Personal Video
10/21/2008 14:27:35

2. From: Lee (Admin)
10/31/2008 12:48:52

5. From: Bob Squires
Script not working as a pop-up
09/29/2008 17:28:33

6. From: Lee (Admin)
10/31/2008 15:35:20

3. From: Dacia Decuir
Good idea but needs to be tweaked
09/20/2008 01:12:28

4. From: Lee (Admin)
10/31/2008 15:31:41

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

1. From: Tejinder SinghAbout Personal Video10/21/2008 14:27:35

2. From: Lee (Admin)10/31/2008 12:48:52

5. From: Bob SquiresScript not working as a pop-up09/29/2008 17:28:33

6. From: Lee (Admin)10/31/2008 15:35:20

3. From: Dacia DecuirGood idea but needs to be tweaked09/20/2008 01:12:28

4. From: Lee (Admin)10/31/2008 15:31:41

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

1. From: Tejinder Singh
About Personal Video
10/21/2008 14:27:35

2. From: Lee (Admin)
10/31/2008 12:48:52

5. From: Bob Squires
Script not working as a pop-up
09/29/2008 17:28:33

6. From: Lee (Admin)
10/31/2008 15:35:20

3. From: Dacia Decuir
Good idea but needs to be tweaked
09/20/2008 01:12:28

4. From: Lee (Admin)
10/31/2008 15:31:41