如何在 YouTube IFrame 上覆盖半透明 Div？

在 YouTube iFrame 上嵌入不透明 Div

在 YouTube iframe 视频上叠加半透明 div 可能会带来挑战，因为引入了HTML5 以及随后用 iFrame 替换视频对象。使用“wmode”参数添加背景透明度的标准方法不再适用。

幸运的是，YouTube 提供了一种解决方案，允许开发者将“wmode=opaque”参数附加到 iframe URL。此参数为 iframe 分配较低的 z-index，使其能够被 iframe 上的其他元素覆盖

HTML

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}

说明：

• iframe URL 包括“wmode=opaque”参数，确保 iframe 被 div 覆盖。
• div 使用“fixed”属性定位并跨越整个屏幕（“top: 0”、“left: 0” ”、“宽度：100%”和“高度：100%”）。
• 使用以下方法将半透明背景应用于 div “背景：rgba(0,0,0,0.8)”。调整第二个和第三个值 (0, 0) 以更改叠加层的颜色。
• div 的 z-index 设置为 50，这会将其置于 iframe 上方但页面上其他内容下方.