将 YouTube 视频与图像重叠

发布于 2024-12-05 17:53:13 字数 158 浏览 2 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月竹挽风 2024-12-12 17:53:13

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

例子：

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

use the iframe method and add ?wmode=opaque to the end of the URL of the video.

example:

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

回复收藏 0 原文

灰色世界里的红玫瑰 2024-12-12 17:53:13

您可以将 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>

希望这会有所帮助！

You could add the YouTube embedded script into a div in the page, then with CSS set the position of that div to relative, now place another div inside of the div that contains the YouTube video and set that div to position absolute, now you can determine where on the page you want you image to appear and it's bounding areas will be defined by the relative divs position.

Here is an example:

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

Your CSS could look similar to the following:

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

Hope this helps!

回复收藏 0 原文

~没有更多了~