首頁 > web前端 > css教學 > 如何在 YouTube IFrame 上覆蓋半透明 Div?

如何在 YouTube IFrame 上覆蓋半透明 Div?

DDD
發布: 2024-12-08 04:16:12
原創
969 人瀏覽過

How to Overlay a Semi-Transparent Div over a YouTube IFrame?

在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>
登入後複製

CSS

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}
登入後複製

CSS

    CSS
  • iframe URL包括“wmode=opaque”參數,確保 iframe 被 div 覆蓋。
div 使用「fixed」屬性定位並跨越整個螢幕(「top: 0」、「left: 0」 」、「寬度:100%」和「高度:100%」)。使用以下方法將半透明背景應用於div “背景:rgba(0,0,0,0.8)”。以更改疊加層的顏色。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板