QuickTime视频播放器上的Fancybox Zindex

Question

我的任务是创建一个YouTube网站。我有一个用于捕获登录信息的花式框。我遇到的问题是，当我弹出花哨的盒子时，它就会放在视频播放器后面。我尝试使用z索引，使fancybox模式制作，将视频播放器设置为不透明/透明，隐藏并显示#Tdiv（工作但重新启动了视频并看起来很糟糕）。这些都没有用。我想将登录盒集中在视频顶部，并位于视频前。任何帮助都将受到赞赏。

这是您想查看fancybox的网站。我将其移开，以便您可以告诉它它位于屏幕上的位置。顺便说一句，它只有在您查看图片时而不是播放视频时才发生。http://mmlab.cs.clemson.edu/spring14/g13/metube/media.php?id=1

视频对象代码

<style>
div.T {
     z-index:-500!;
    position:absolute;
    margin-top:20px;
    left:225px;
}
</style>
<div id ="T">
<object id="asdf" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  
       codebase="http://www.apple.com/qtactivex/qtplugin.cab"
       width="854" height="510">
 <param name="src" value="<?php echo $result_row[2].$result_row[1];?>" />
 <param name="autoplay" value="true" />
 <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
 <param name="controller" value="true" />
 <param name="wmode" value="opaque" /> 
 <!--[if !IE]> <-->
   <object id="asdf1"  data="<?php echo $result_row[2].$result_row[1];?>" width="854" height="510" type="video/quicktime"> 
     <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
     <param name="controller" value="true" />
     <param name="wmode" value="opaque" /> 
   </object>
</div>  

花式盒代码

<style>
.fancybox-skin{
    position:absolute;
    left:150px; 
    top:-100px;
    z-index:10000;
}
#wrap { 
width: 800px;
margin: 20px auto;
z-index:100000;
}
</style>
$(document).ready(function() {
var results = "";
function fan(){
    $.fancybox({
   href : "#login_form_ajax",
   afterShow: function(){
     //$('#T').hide();         
    },
   afterClose : function(){
    $("#login_error").hide();
    //$('#T').show();    
   }
  });   
}
 $("#top-login-button").click(function() {
  var buttval = "<?php if(isset($_SESSION['username']))echo 'Sign out';else echo 'Sign in';?>";
  if(buttval == "Sign out")
    window.location.href = 'Logout.php';
      else        
        fan();                  
 });  

Answer 1

尝试更改fancybox覆盖的z索引而不是皮肤。

您的Fancybox CSS文件的第180行。

 .fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('fancybox_overlay.png');
  }

尝试将z-index更改为更高的数字。我无法测试它，因为您的玩家没有出现。

我也强烈建议不要使用诸如QuickTime之类的播放器，因为这是插件人员必须安装的。我建议将HTML5播放器与FlowPlayer.org这样的闪存后备使用