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

时间:2014-03-12 12:33:03

标签: javascript jquery css html5 youtube

你可以帮帮我吗?如何放置"关闭按钮"在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/

提前谢谢

1 个答案:

答案 0 :(得分:0)

您的z-index需要更高:

.black_overlay{
    z-index:9999;
}

DEMO

此外,对于IE,您需要将wmode参数添加到视频网址并将其设置为transparent

EG。

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