透過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">
或者,也可以使用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中文網其他相關文章!