為什麼 YouTube 影片嵌入會覆蓋網頁中的 z-index？

YouTube 影片嵌入覆蓋z-index

透過iframe 嵌入YouTube 影片可能會導致網頁中出現意外行為，特別是對於共享的元素相同的垂直空間。在某些瀏覽器中，例如 Internet Explorer (IE9) 和 Chrome，影片上方呈現的下拉式選單或其他元素可能會部分隱藏在 iframe 後面。

為什麼會發生這種情況？

此行為不是由 iframe 本身直接引起的，而是由 YouTube 在其嵌入程式碼中包含的內部 CSS 樣式引起的。此樣式會覆蓋 iframe 上設定的 z-index 屬性，導致影片嵌入的堆疊順序高於頁面上其他元素。

解決方案：新增 wmode 參數

要解決此問題，您可以透過新增值為「不透明」或「透明」的 wmode 參數來修改嵌入程式碼。這會告訴 YouTube 禁用其內部 CSS 樣式並尊重 iframe 的 z 索引。

使用wmode 的嵌入程式碼範例：

<code class="html"><iframe title="YouTube video player" width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0">
</iframe></code>

替代方案解決方案：JavaScript

或者，您可以使用JavaScript 動態地將wmode 參數新增至頁面上的所有iframe。這是一個範例片段：

<code class="javascript">$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});</code>

以上是為什麼 YouTube 影片嵌入會覆蓋網頁中的 z-index？的詳細內容。更多資訊請關注PHP中文網其他相關文章！