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