DHTML floating video

design

#1

Hi.
I am facing a problem in putting a DHTML floating video on a website. I’ve used the tutorial on this website:
http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding

I’m trying to get the video to be in the center on the page and but it is moving to the left. How do i center the video?

Thank you.


#2

This code is inserted in the head of the page

<!----------------------------------------------------------Start of video code in the head script------------------------------------------------------------>
<script type="text/javascript">
function getElementsByClass (searchClass) {

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) {

 var videos = getElementsByClass('video');
   var isplaying=null;

   for(i=0; i<videos.length; i++) {
   if (videos[i].style.display=='block') {
       isplaying=videos[i].id;
       var tmp=videos[i].innerHTML;
        videos[i].innerHTML='';
        videos[i].style.display='none';
        videos[i].innerHTML=tmp;     }
         }


var dark=document.getElementById('darkenScreenObject');  if (!dark) {

var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div');
tnode.style.backgroundColor='rgb(0, 0, 0)';
tnode.style.opacity='0.7';
tnode.style.MozOpacity='0.70';
tnode.style.filter='alpha(opacity=70)';
tnode.style.zIndex='1';
tnode.style.position='absolute';
tnode.style.top='0px';
tnode.style.left='0px';
tnode.style.overflow='hidden';
tnode.style.display='none';
tnode.id='darkenScreenObject';
tbody.appendChild(tnode);

dark=document.getElementById('darkenScreenObject');
  }  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) {
       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;       }

         dark.style.width= pageWidth+'px';
         dark.style.height= pageHeight+'px';
         dark.style.display='block'; }
         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;

         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;}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<!----------------------------------------------------------End of video code in the head script------------------------------------------------------------>

and then this code is inserted in the body, right after the body tag


<div class='video' id='vid1'>
<a href="#" onclick='return popVideo("close")' style='float: left; color: white;'>Close</a><BR>  <object width="560" height="405"><param name="movie" value="http://www.youtube-nocookie.com/v/RFL8b1p1ELY?fs=1&hl=en_US&rel=0"></param><param name="wmode" value="transparent"></param> <embed src="http://www.youtube-nocookie.com/v/RFL8b1p1ELY?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash"  wmode="transparent" width="560" height="405"></embed></object>
</div>

This is the code, on how when i click the button the video is displayed:

  <p><a href="http://www.youtube.com/watch?v=RFL8b1p1ELY" class="trailer" onClick='return popVideo("vid1",true)' onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','playing.jpg',1)"><img src="play.jpg" name="Image10" width="190" height="47" border="0"></a></p></TD>
<TD width="51%">

[/code]