覆盖视频播放器上的图形

如果甚至无法完成，这可能很容易。我想在我的网站上的这个视频播放器的顶部覆盖顶部横幅图形（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

覆盖视频播放器上的图形

回答

相关问题