如何放置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參數添加到您的視頻網址，並設置爲transparent

EG。

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