Use Popup Megavideo Player using JavaScript and DHTML

Megavideo provides a very neat customizable player to embed on your web pages, but not always you want most of your page area consumed by Megavideo Video windows. So for that reason I have created an easy to use Megavideo Popup window which can be embedded dynamically into the page just by clicking a link.

Using dynamic div tags using JavaScript which makes it easier to embed multiple videos on the page without creating static div containers for the videos. To embed a video you just need to create any kind of image or text link which calls the JavaScript openMegavideo() function on mouse click to create dynamic popup window. The link should appear something like this:

<a href="#" onclick="openMegavideo('video_id')">Video Title</a>

Code (markup):

Advantages of using this popup Megavideo player:

1. Zero coding required!!!
2. Piece of cake to embed Megavideo popup windows by just calling the openMegavideo() function from any link/button.
3. Easily customizable Megavideo parameters in the JavaScript function.
4. No static Div tags required for each Megavideo link.

However still can not get it to work. Surely there is something wrong in the "//Create dynamic Megavideo Div". and ask the community to help solve the problem.

Popup Megavideo Player JavaScript code:

function openMegavideo(id){
      //megavideo Player Parameters
      var width = 640;
      var height = 505;
     
      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
            }
      }
      // Make Background visible...
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "visible";
     
      //Create dynamic Div container for megavideo Popup Div
      var divobj = document.createElement('div');
      divobj.setAttribute('id',id); // Set id to megavideo id
      divobj.className = "popup";
      divobj.style.visibility = "visible";
      var divWidth = width + 4;
      var divHeight = height + 20;
      divobj.style.width = divWidth + "px";
      divobj.style.height = divHeight + "px";
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2 - 10;
      //Set Left and top coordinates for the div tag
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";
     
      //Create dynamic Close Button Div
      var closebutton = document.createElement('div');
      closebutton.style.visibility = "visible";
      closebutton.innerHTML = "<span onclick=\"closeMegavideo('" + id +"')\" class=\"close_button\">X</span>";
      //Add Close Button Div to megavideo Popup Div container
      divobj.appendChild(closebutton);

      //Create dynamic megavideo Div
      var ytobj = document.createElement('div');
      ytobj.setAttribute('id', "yt" + id);
      ytobj.className = "ytcontainer";
      ytobj.style.width = width + "px";
      ytobj.style.height = height + "px";
      var URL = "http://www.megavideo.com/v/" + id + ";
      var Megavideo = "<object width=\"" + width + "\" height=\"" + height + "\">";
      Megavideo += "<param name=\"movie\" value=\"" + URL + "\"></param>";
      Megavideo += "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param>";
      Megavideo += "<embed src=\"" + URL + "\" type=\"application/x-shockwave-flash\" ";
      Megavideo += "allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"" + width + "\" height=\"" + height + "\"></embed></object>";
      ytobj.innerHTML = Megavideo;
      //Add megavideo Div to megavideo Popup Div container
      divobj.appendChild(ytobj);
     
      //Add megavideo Popup Div container to HTML BODY
      document.body.appendChild(divobj);
}
function closeMegavideo(id){
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      var ytobj = document.getElementById("yt" + id);
      divobj.removeChild(ytobj); //remove megavideo Div
      document.body.removeChild(divobj); // remove Popup Div
}

Code (markup):

Popup Megavideo Div CSS code:

.popup {
      position: absolute;
      z-index: 2;
}
.popup_bg {
      position: absolute;     visibility: hidden;
      height: 100%; width: 100%;
      filter: alpha(opacity=0); /* for IE */
      opacity: 0; /* CSS3 standard */
      left: 0px; top: 0px;
      background-color: #999;
      z-index: 1;
}
.ytcontainer {
      border: 2px solid #666;
      clear: both;
}
.close_button {
      font-family: Verdana, Geneva, sans-serif;
      font-size: small; font-weight: bold;
      color: #666; text-decoration: none;
      display: block; float: right;
      background-color: #FFF;
      z-index: 3; cursor: default;
      border: 2px solid #666;
      margin-bottom: -2px;
      padding: 0px 3px 0px 3px;
}
body { margin: 0px; }

Code (markup):

HTML code to embed megavideo Popup windows:

<a href="#" onclick="openMegavideo('LLZH6YS1')">Open Video</a><br />
<div id="bg" class="popup_bg"></div>

Code (markup):

Can you take a look in the javascript code to see where am I wrong? thanks

Log in or Sign up

Use Popup Megavideo Player using JavaScript and DHTML

Fabio Fask Peon

Fabio Fask Peon

Log in or Sign up

Use Popup Megavideo Player using JavaScript and DHTML

Fabio Fask Peon

Fabio Fask Peon

Useful Searches