Question

我有一个包含YouTube视频的网站。我有一个弹出窗口，使用javescript。每次按下弹出窗口，它都会出现在youtube视频的“后面”。我尝试添加

element.style.zIndex="1"

或 object.style.zIndex =“1”

到我的javascript函数和

z-index:-1;

到我的youtube css。但它没有帮助。我该怎么办？

youtube css：

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

Youtube代码：

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

Answer 1

将wmode="opaque"添加到<object> / <embed>代码参数，看看是否有帮助。

Answer 2

这很常见。你使用像灯箱或其他东西。当这件事发生在我身上时，我在事件开始时写了一个函数（在灯箱上显示），然后我隐藏了对象，即:(我将youtube视频放在一个名为“ToHide”的div中，然后使用

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

然后我在灯箱上注册一个事件（关闭时）。当事件触发时我使用此代码：

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

这就是全部：）

Answer 3

问题在于Flash播放器，默认情况下它使用忽略排序或z-index的覆盖模式。

使用嵌入flash对象时，<param name="wmode" value="opaque" />或使用swfobject .addParam（'wmode'，'opaque'）;

对于youtube，只需将wmode =“opaque”添加到embed元素即可。

Answer 4

如果您使用iframe标记，请查看此页面。 http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

点是..

Answer 5

<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.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 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.com/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>

youtube视频背后的弹出窗口

5 个答案: