為什麼下拉選單中的 YouTube iframe 在不同瀏覽器中呈現不同的效果？

嵌入在iframe 中的YouTube 影片在某些瀏覽器中忽略z-index

透過iframe 嵌入在其下方的YouTube 影片的多層下拉式選單在某些網路中造成了渲染問題瀏覽器。雖然下拉式選單出現在 Firefox 中的影片頂部，但在 Chrome 和 IE9 中只有一小部分可見。

令人驚訝的是，罪魁禍首不是 iframe，而是 YouTube 影片本身。將 iframe 定位到其他外部網站時，即使在 IE 中，下拉式選單也能正常顯示。這表明 YouTube 的嵌入代碼可能存在問題。

專家建議合併wmode 參數，此參數有兩個值：

• 不透明
• 透明

儘管解釋其效果的文件有限，但將此參數附加到視訊的URL（如下例所示）可以解決問題：

<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：

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

此方法成功撤銷了YouTube 影片的z-index 主導地位，允許下拉式選單和其他元素在其上方正確呈現。

以上是為什麼下拉選單中的 YouTube iframe 在不同瀏覽器中呈現不同的效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！