覆蓋視頻播放器上的圖形

如果甚至無法完成，這可能很容易。我想在我的網站上的這個視頻播放器的頂部覆蓋頂部橫幅圖形（png），以在頂部的紅色電影院式幕簾下方的屏幕中播放視頻。這裏是我的代碼，那麼我需要使用什麼樣的覆蓋圖，以便圖形隨着我的視頻一直移動？覆蓋視頻播放器上的圖形

<div style="position: relative;"> 
    <div id="video-player" style="width: 600px; height: 800; margin: 0; position:relative; "> 
    <div style="position: absolute; top: 200px; left: 10px;"> 
    <video height="400" width="599" id="container" src="my-video-source">&nbsp;</video> 
    </div>

感謝

來源

2011-12-15 Henry

只需使用一個absolutely positioned element。您可能還需要與Z-Indexes混淆

來源

2011-12-15 19:34:27

我已經做了稍微修改一下，也不管我做什麼，圖像最終總是坐在視頻的頂部和推動視頻下來...任何建議，以防止/解決呢？感謝 – Henry 2011-12-15 19:38:23

請嘗試以下操作。只要在寬度上看你的數學，你就是在你的例子中突破了容器。另外，如果窗簾在視頻後面添加z-index：9;去某個班級。（如果需要增加更多）如果您的視頻是嵌入了YouTube的iframe，那麼您需要在YouTube網址上添加不透明度設置。

<style> 
.video_container{ 
    height:600px; 
    padding:200px 0 0 10px; 
    position:relative; 
    width:590px; 
} 
.curtain{ 
    position:absolute; 
    top:0; 
    left:0; 
} 
</style> 


<div class="video_container"> 
    <video width="590" height="400" controls="controls"> 
     <source src="my-video-source" type="video/mp4" /> 
     &nbsp; 
    </video> 
    <img class="curtain" src="/curtain.png"> 
</div>

來源

2011-12-15 19:53:34 Syon

覆蓋視頻播放器上的圖形

回答

相關問題