I have a website that contains a youtube video. I have a popup window which goes up using javescript. Each time I press the popup, it es up "behind" the youtube video. I tried adding

element.style.zIndex="1" 

or object.style.zIndex="1"

to my javascript function and

z-index:-1;

to my youtube css. But it doesn't help. What should I do?

youtube css:

position: absolute;
height: 259px;
width: 683px;
left: 235px;
float: left;
text-align:right;
z-index:-1;

Youtube code:

<div id="youtube_video"  style="float:right">
<object width="580" height="259" float="right"><param name="movie" value=";amp;hl=iw_IL" ></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=";amp;hl=iw_IL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="259" ></embed></object>

I have a website that contains a youtube video. I have a popup window which goes up using javescript. Each time I press the popup, it es up "behind" the youtube video. I tried adding

element.style.zIndex="1" 

or object.style.zIndex="1"

to my javascript function and

z-index:-1;

to my youtube css. But it doesn't help. What should I do?

youtube css:

position: absolute;
height: 259px;
width: 683px;
left: 235px;
float: left;
text-align:right;
z-index:-1;

Youtube code:

<div id="youtube_video"  style="float:right">
<object width="580" height="259" float="right"><param name="movie" value="http://www.youtube./v/7mKpzQOlyKE?fs=1&amp;hl=iw_IL" ></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube./v/7mKpzQOlyKE?fs=1&amp;hl=iw_IL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="259" ></embed></object>

• javascript
• html
• css

• can you post the code for the youtube in relation to the popup? html code too – KJYe.Name Commented Feb 18, 2011 at 16:57
• 1 possible duplicate of FF3/Windows CSS z-index problem with YouTube player – epascarello Commented Feb 18, 2011 at 17:00
• The other post I just posted fort this to close has the answer, has nothing to do with the z-index. :) – epascarello Commented Feb 18, 2011 at 17:01
• Please don't close it. Its not the same as the other. mine doesn't work on explorer and does work on firefox, not like the other question. – lital maatuk Commented Feb 18, 2011 at 17:02
• 1 Is it a flash embed? did you set wmode="transparent"? – Josiah Ruddell Commented Feb 18, 2011 at 17:04

5 Answers 5

Add wmode="opaque" to the <object> / <embed> tag parameters and see if it helps.

This is mon. You use something like lightbox or something else. When this happened to me i write a function on event start (on lightbox show), and there i hide the object ie: (I place the youtube video inside a div with class name "ToHide" and then o use

$(".ToHide").hide(); 

Then i register an event on lightbox (on closed). When the event fires i use this code :

$(".ToHide").show();

That's all:)

The problem is with the flash player, by default it uses an overlay mode that ignores sorting or z-index.

When you embed the flash object use, <param name="wmode" value="opaque" />, or if using swfobject .addParam('wmode', 'opaque');

For youtube, just add wmode="opaque" to the embed element.

if you use the iframe tag, view this page. http://maxmorgandesign./fix_youtube_iframe_overlay_and_z_index_issues/

point is ..

<script language="javascript"> 
function openYouTube(id){ 
  //YouTube Player Parameters 
  var width = 640; 
  var height = 505; 
  var FullScreen = "yes"; 
  var AutoPlay = "yes"; 
  var HighDef = "yes"; 

  //Calculate Page width and height 
  var pageWidth = window.innerWidth; 
  var pageHeight = window.innerHeight; 
  if (typeof pageWidth != "number"){ 
  if (document.patMode == "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 YouTube Popup Div 
  var divobj = document.createElement('div'); 
  divobj.setAttribute('id',id); // Set id to YouTube 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=\"closeYouTube('" + id +"')\"                      class=\"close_button\">X</span>"; 
  //Add Close Button Div to YouTube Popup Div container 
  divobj.appendChild(closebutton); 

  //Create dynamic YouTube Div 
  var ytobj = document.createElement('div'); 
  ytobj.setAttribute('id', "yt" + id); 
  ytobj.className = "ytcontainer"; 
  ytobj.style.width = width + "px"; 
  ytobj.style.height = height + "px"; 
  if (FullScreen == "yes") FullScreen="&fs=1"; else FullScreen="&fs=0"; 
  if (AutoPlay == "yes") AutoPlay="&autoplay=1"; else AutoPlay="&autoplay=0"; 
  if (HighDef == "yes") HighDef="&hd=1"; else HighDef="&hd=0"; 
  var URL = "http://www.youtube./v/" + id + "&hl=en&rel=0&showsearch=0" + FullScreen      + AutoPlay + HighDef; 
  var YouTube = "<object width=\"" + width + "\" height=\"" + height + "\">"; 
  YouTube += "<param name=\"movie\" value=\"" + URL + "\"></param>"; 
  YouTube += "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param>"; 
  YouTube += "<embed src=\"" + URL + "\" type=\"application/x-shockwave-flash\" "; 
  YouTube += "allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"" + width + "\" height=\"" + height + "\"></embed></object>"; 
  ytobj.innerHTML = YouTube; 
  //Add YouTube Div to YouTube Popup Div container 
  divobj.appendChild(ytobj); 

  //Add YouTube Popup Div container to HTML BODY 
  document.body.appendChild(divobj); 
  } 
  function closeYouTube(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 YouTube Div 
  document.body.removeChild(divobj); // remove Popup Div 
  } 
  </script>

 here is the style
 <style type="text/css"> 

 .popup { 
  position: absolute; 
  z-index: 2; 
  } 
   .popup_bg { 
  position: absolute;     visibility: hidden; 
  height: 100%; width: 100%; 
  filter: alpha(opacity=70); /* for IE */ 
  opacity: 0.7; /* 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; } 

   </style>

and a link to open youtube video in popup

 <a href="#" onclick="openYouTube('_AJ0SkbPxAk')">Stewie Beats Brian</a>