如何在 Youtube 播放器上放置关闭按钮

Question

你能帮我吗？如何在 Youtube 播放器上放置“关闭按钮”？我正在尝试，但它会回到玩家身上。

<iframe id="ytPlayer" class="white_content" style="z-index: 1004;display: block;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="532" height="329" src="http://www.youtube.com/embed/xHLnZMjJ8bY?autoplay=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2F127.0.0.1%3A81"></iframe>  

<div id="ytinfo" class="white_content" style="display: block;">
 <div id="ytName">A.R Rahman Maahi Ve Song Highway</div>
<div id="ytDesc">
  <p>Maahi Ve Full Song (Audio) ► http://youtu.be/S1aQhVUy_9g </p>
</div>
</div>
<div id="fade" class="black_overlay" onclick="closeLightBox()" style="display: block;">
<div style="
  z-index: 9999;
  left: 78%;
  top: 11%;
  width: 22px;
  position: absolute;
  "> <img src="https://airasiaxtakeover.appspot.com/imgs/1060/WhiteClose.png"></div>
</div>

css --

.black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 10%;
        left: 23%;
        width: 50%;
        height: 50%;
        padding: 16px;
        background-color: black;
        z-index:1002;
        overflow: auto;
    }

这里是演示链接：- http://jsfiddle.net/rushijogle/EFbzY/

提前谢谢你

Answer 1

您的z-index 需要更高：

.black_overlay{
    z-index:9999;
}

DEMO

另外，对于 IE，您需要将 wmode 参数添加到您的视频 URL 并将其设置为 transparent

例如。

http://www.youtube.com/embed/xHLnZMjJ8bY?autoplay=0&enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A81&wmode=transparent