如何在 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中文网其他相关文章！