YouTube 影片嵌入與z-index 問題

YouTube 影片嵌入與z-index 問題

使用多層下拉導覽選單下方的iframe 嵌入YouTube 影片時，您可能會遇到Chrome 和Internet Explorer 中下拉選單出現在影片後面的問題。將滑鼠懸停在主導航項目上時，下拉式選單應出現在所有瀏覽器中的影片頂部。

問題 1：為什麼下拉選單出現在 Chrome 和 IE9 中的 YouTube 影片後面？

這個問題與YouTube影片本身有關，與iframe無關。 YouTube 嵌入包含覆蓋其他 CSS 設定的內部 CSS，包括您的 z-index 值。

問題 2：為什麼設定 z-index:-999 !很重要；iframe 上的 仍然會導致問題？

YouTube 嵌入程式碼中的覆蓋 CSS 優先於您應用於 iframe 的任何 z 索引設定。

解決方案：

&wmode=Opaque

此設定允許影片融入背景，允許頁面上的其他元素顯示在其上方。

附加說明：
• 您還可以使用參數wmode=transparent 代替Opaque，儘管這可能會導致透明度問題

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url "?wmode=transparent");
    });
});

$(document) .準備好（函數（）{ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url "?wmode=transparent"); }); });