在视频播放器上叠加图形

Question

即使做不到也很容易。我想在这个视频播放器上叠加一个顶部横幅图形(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>

谢谢

Answer 1

使用绝对定位元素。您可能也需要使用Z-Indexes

Answer 2

尝试以下操作。只要注意你的宽度的数学，你打破了你的例子中的容器。另外，如果窗帘在"后面"，视频添加z-index:9;窗帘课。(增量更多，如果需要)如果你的视频是一个youtube iframe嵌入，那么你需要添加youtube url上的不透明度设置。

<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>