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-index 設定。
解決方案:
要解決此問題,請將以下參數新增至嵌入影片的網址:
&wmode=Opaque
此設定允許影片融入背景,從而允許頁面上的其他元素
附加說明:
$(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); });
以上是為什麼我的下拉式選單出現在 Chrome 和 IE9 中的 YouTube 影片後面?的詳細內容。更多資訊請關注PHP中文網其他相關文章!