首頁  >  文章  >  web前端  >  為什麼我的下拉式選單出現在 Chrome 和 IE9 中的 YouTube 影片後面?

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

Patricia Arquette
Patricia Arquette原創
2024-11-05 06:11:02945瀏覽

Why does my dropdown menu appear behind a YouTube video in Chrome and IE9?

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

此設定允許影片融入背景,從而允許頁面上的其他元素

附加說明:

  • 您還可以使用參數wmode=transparent 代替Opaque,儘管這可能會導致透明度
  • 或者,您可以在加載頁面上的所有iframe 之前使用jQuery 修改其URL,如下面的程式碼片段所示:
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn