Video Popup List

Patrick Hunlock Sep 17, 2008

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://www.javascriptsource.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>

Leave a Response

(6 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

That's because you don't have any space at the top. You'll need to either add extra space or change the CSS settings.

Lee Oct 31, 2008

Just change the location (path) of the file in both places.

Lee Oct 31, 2008

Hello if i have flv video on my server how to play with this settings or quicktime , wmv video on my server ?

Tejinder Singh Oct 21, 2008

Unfortunately I cant get the code I was sent to work the way it does in the example here. What happens on my system is that the page with the links on is completely replaced by a full 'You Tube' page - not by a pop-up on the original page. Also, adding the 'true' (without the quotes) parameter has no effect whatever.[br /][br /]Any idea what I might doing wrong to cause this? I think I've copied and pasted everything correctly. Thanks for any ideas you can give.[br /][br /]Regards,[br /][br /]Bob

Bob Squires Sep 29, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Video Popup List

General

Notes

Source Code

External file

Head

Body

Leave a Response

Attention JavaScript Coders

Whitepapers and More