Css 将图形叠加在视频播放器上

如果做不到，这可能很容易。我想在我的网站上的这个视频播放器上叠加一个顶部横幅图形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>

---

谢谢

只要用一个。您可能需要处理太多的问题

请尝试以下方法。看看你在width上的数学，在你的例子中，你是在打破容器。此外，如果幕布“在”视频后面，则添加z索引：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>

---

我做了一些小修补，不管我做什么，图像总是放在视频的顶部，然后把视频往下推…有什么建议可以防止/修复吗？谢谢看视频的位置，试试反向边距？我不熟悉反向边距-这也会影响图像的叠加方式吗？如果你不熟悉反向边距，我会说你咬得太多了！是的，我知道！这就是我来这里的原因！：如果这真的不能简单地做到，那么我想我会放弃这个想法-谢谢你的帮助。