Overlaying a graphic on top of a video player - css

Question

This may be easy if it can’t even be done. I want to overlay a top banner graphic (png) on top of this video player on my site to give the illusion of the video playing in a screen underneath a red movie-theatre style curtain on top. Here’s my code, so what kind of overlay do I need to use so the graphic will always move with my video?
<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"> </video>
</div>
Thanks

Answer 1

just use an absolutely positioned element. You may need to mess around with Z-Indexes too

Answer 2

Try the following. Just watch your math on width's, you were breaking out of the container in your example. Also, if the curtain is 'behind' the video add z-index:9; to the .curtain class. (increment by more if needed) If your video is a youtube iframe embed then you'll need to add the opacity setting on 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" />
</video>
<img class="curtain" src="/curtain.png">
</div>