如何在 YouTube iFrame 上覆蓋半透明 Div？

在YouTube iFrame 上疊加半透明Div

在嘗試疊加半透明Div 時，iFrame 中嵌入的YouTube 影片提出了獨特的挑戰- 透明分區。與先前使用 的方法不同，對於嵌入對象，帶有 wmode="transparent" 的元素，iFrame 實現 требует другой подход。

了解問題

iFrame 嵌入影片的 z-index 為通常高於頁面上的所有其他元素。這意味著放置在其上的任何 div 都將被隱藏。

解決方案：將「wmode=opaque」附加到 iFrame URL

解決方案在於修改 YouTube iFrame透過附加 GET 參數 wmode=opaque 的 URL。此參數指定影片應以允許其他元素覆寫它的模式渲染。

用法

要實現此目的，只需添加 wmode=opaque 作為iFrame 來源 URL 中的第一個參數。例如：

<iframe class="youtube-player" type="text/html" width="520" height="330" src="https://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

注意：

• 確保 URL 中的第一個參數為 wmode=opaque。
• 其他參數應附加在 wmode=opaque 之後。

透過以下方式透過這些步驟，您可以成功地將半透明 div 覆蓋在嵌入的 YouTube iFrame 影片上。

以上是如何在 YouTube iFrame 上覆蓋半透明 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！