Question

我遇到的YouTube视频问题是，右上角的“关闭x”按钮不在youtube视频之上。由于某种原因，它卡在他们下面。我已经在所有浏览器中尝试过它，看它是否只是一个IE问题，但它似乎发生在所有YouTube视频上。

我也进入.css并将z-indext更改为如此疯狂的高数字以确定它是否会修复但没有运气，有没有人遇到过这个问题？它似乎只与youtube视频隔离。

Answer 1

这是因为youtube使用的flash播放器不会使用默认窗口模式（参数名称为wmode）来尊重CSS的z-index值

在嵌入youtube iframe时，将 wmode = opaque 参数添加到网址中（wmode = transparent也可以），所以它看起来像这样：

<iframe width="420" height="315" src="http://www.youtube.com/embed/<youtbue_id>?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Answer 2

@ complex857是对的，您需要更改YouTube视频的wmode设置（至opaque）。

最好的方法是：

1）。从这里https://github.com/fancyapps/fancyBox/tree/master/source

获取最新版本的fancybox（和帮助者）

2）。在常规的fancybox css和js文件旁边，添加fancybox-media helper js文件，如（查看自己的路径）：

<script type="text/javascript" src="fancybox2.0.6/helpers/jquery.fancybox-media.js"></script>

3）。这个新版本允许您通过自定义脚本将特定参数传递给youtube，如：

   $(document).ready(function(){
    $(".fancybox").fancybox({
        // other API options here
        padding: 0, // optional
        // set helpers media
        helpers : {
         media : {}
        },
        // NEW youtube media settings
        youtube : {
         autoplay    : 0, // 1 = will enable autoplay
         wmode       : 'opaque'
        }
    }); // fancybox
   }); // ready

注意：这适用于fancybox v2.0.6 +

Fancybox关闭按钮不在youtube视频之上

2 个答案: