用图像重叠Youtube视频

时间:2011-09-20 20:03:21

标签: html css image youtube overlapping

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

2 个答案:

答案 0 :(得分:6)

使用iframe方法并将?wmode=opaque添加到视频网址的末尾。

示例:

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

答案 1 :(得分:1)

您可以将YouTube嵌入式脚本添加到页面中的div中,然后使用CSS将该div的位置设置为relative,现在将另一个div放入包含YouTube视频的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>

希望这有帮助!