将 Youtube 视频与图像重叠答案

【问题标题】：Overlapping a Youtube video with an image将 Youtube 视频与图像重叠
【发布时间】：2011-11-21 09:51:29
【问题描述】：

我只是想知道是否可以将 YouTube 视频（实际的视频播放器）与图像重叠。我想做的是让它看起来像有两只手握着 YouTube 视频，一只左手，一只右手。我认为这是一个简单的 CSS 东西，但不确定，因为我在网上找不到任何东西（我发现的只是图像重叠图像和淡入淡出）。无论如何，任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： html css image youtube overlapping

【解决方案1】：

使用 iframe 方法，将?wmode=opaque 添加到视频 URL 的末尾。

示例：

<iframe width="630" height="328" src="http://www.youtube.com/embed/BS0PaiHkbU0?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

【讨论】：

【解决方案2】：

您可以将 YouTube 嵌入脚本添加到页面中的 div 中，然后使用 CSS 将该 div 的位置设置为相对位置，现在在包含 YouTube 视频的 div 中放置另一个 div 并将该 div 设置为绝对位置，现在您可以确定您希望图像出现在页面上的哪个位置，并且它的边界区域将由相对 div 位置定义。

这是一个例子：

<div class="YouTube">
    <!-- embedded YouTube Script -->
    <div class="FloatingImage">
        <img src="#" height="" width="" />
    </div>
</div>

您的 CSS 可能类似于以下内容：

<style type="text/css">
    .YouTube { width: 450px; height: 400px; position: relative; }
    .FloatingImage { position: absolute; top: 75px; left: 0px; height: 50px; width: 25px; }     
</style>

希望这会有所帮助！

【讨论】：