為什麼我的下拉式選單出現在 Chrome 和 IE9 中嵌入的 YouTube 影片後面？

透過 iframe 嵌入的 YouTube 影片忽略 z-index？

在嘗試建立水平多層下拉導覽選單時，使用者遇到了在 Chrome 和 IE9 中，下拉式選單無法出現在嵌入的 YouTube 影片頂部（而在 Firefox 中卻可以）。這個問題與 YouTube 影片本身有關，而不是所使用的 iframe 技術。

問題 1：為什麼會出現差異？

即使明確設定了 z-index：-999！重要；對於 iframe，下拉選單仍然隱藏在影片後面。這表示 YouTube 嵌入程式碼中存在 CSS 幹擾。

問題 2：使用 wmode 解決問題

要修正這種情況，將 wmode 加入 YouTube 嵌入程式碼似乎可以解決這個問題。具體來說，可以使用以下參數：

• &wmode=Opaque
• &wmode=transparent

此解決方案背後的技術原因仍然不清楚。但是，以下程式碼範例說明了其實作：

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque"></iframe>

或者，可以部署以下jQuery 程式碼來修復頁面上所有iframe 的z-index 問題：

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

透過使用wmode參數，可以自訂YouTube 嵌入程式碼以使其按預期運行，從而允許下拉式選單出現在所有主要瀏覽器中嵌入影片的頂部。

以上是為什麼我的下拉式選單出現在 Chrome 和 IE9 中嵌入的 YouTube 影片後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！