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

只需使用absolutely positioned element即可。你可能还需要弄乱Z-Indexes

Answer 2

尝试以下方法。只是在宽度上观察你的数学，你在示例中突破了容器。此外，如果幕后“幕后”，则视频添加z-index：9;到.curtain班。（如果需要，请增加更多）如果您的视频是嵌入了iframe的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>

覆盖视频播放器顶部的图形

2 个答案: