如何在嵌入的 youtube 剪辑上浮动 png

Question

我正在设计一个网页，这个概念是一台可以播放 Youtube 视频的电视机。电视是一个 div 内的 png，屏幕是透明的，因此您可以看到它背后的内容。我想在屏幕上放一个 Youtube，但 Youtube 视频与 div 重叠。如果我使用图像或文本执行此操作，则效果很好。

问题是“屏幕”不是方形的：图片有轻微的鱼眼效果，所以没有一个边缘是直的，而角落是圆的。我不介意某些 iframe 被隐藏在电视机的 png 后面——这就是我想要这样做的原因！ -- 但 iframe 保持在顶部。

简而言之，如何在中间有大透明部分的 png 后面隐藏一些 iframe？

编辑

这是一个实时链接。希望大家喜欢 JAMS :)

http://jkdjkdjkd.zxq.net/redstarartists/index.html

Answer 1

我对此问题的解决方案是在 iframe 而不是对象中打开 youtube 播放器：

然后我将 wmode=opaque 作为 get 参数附加到 URL。

Answer with 52+ score to the issue here

Answer 2

如果我说得对，您希望能够将内容“放在”您的“屏幕”（基本上是嵌入的 YouTube 视频）的“上方”吗？老实说，我能想到的唯一可以与 YouTube 视频一起使用的方法是使用旧的 iframe YouTube 嵌入格式并添加一个值为 opaque 的 wmode 参数。

<param name="wmode" value="opaque" />

该参数将更改嵌入式 Flash 文件的堆叠顺序，并使您能够通过简单的定位和 z-index 属性将内容“放在”屏幕上。

编辑：我告诉过你为wmode 参数添加opaque 值，但我忘记了一些浏览器使用embed 标签:) 只需更改您的YT 嵌入部分看起来像这样（您会注意到 wmode 参数是 embed 的一部分）

<object width="705" height="559">
    <param name="movie" value="http://www.youtube.com/v/qr-OM5bdlto?version=3&amp;hl=en_US">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="opaque">
    <embed src="http://www.youtube.com/v/qr-OM5bdlto?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="705" height="559" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</object>

Answer 3

我不能保证它会起作用†，但您基本上想在一个相对定位的 div 中使用两个绝对定位的 div：

<div class="move_holder">
    <div class="tv_frame"></div>
    <div class="youtube_video"><!-- place video here --></div>
</div>

CSS：

.movie_holder { position: relative; }
.movie_holder div { position: absolute; top: 0; left: 0; width: 500px; height: 350px; }
.tv_frame { background: transparent url(images/tv_frame.png) no-repeat 0 0;

这应该将 .tv_frame 放在 .youtube_video div 上方。根据需要调整宽度和高度。

---

† 我不能保证，因为 Flash 播放器并不是真正的 HTML 元素，因此它可能会呈现在整个页面的顶部。你需要特别检查IE！