Question

我正在设计一个网页，这个概念是一个播放Youtube视频的电视机。电视是div内部的一个png，屏幕透明，所以你可以看到它背后的东西。我希望在屏幕上放置一个Youtube，但是Youtube视频重叠在div上。如果我使用图像或文本执行此操作，它可以正常工作。

麻烦的是'屏幕'不是正方形：图片对它有轻微的鱼眼效果，因此没有边缘是直的，角落是圆的。我不介意一些iframe被隐藏在电视机的背后 - 这就是为什么我要做的！ - 但iframe保持在最顶层。

简而言之，我怎样才能隐藏在中间有一个大透明部分的png后面的一些iframe？

修改

这是一个实时链接。希望你们像JAMS一样：）

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

Answer 1

如果我做得对，你希望能够将“屏幕”上方的东西放在“屏幕”之上，这基本上是一个嵌入式YouTube视频？说实话，我能想到的唯一可以与YouTube视频配合使用的方法是使用旧的iframe YouTube嵌入格式，并添加值为wmode的{{1}}参数。

opaque

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

编辑：我告诉您要为<param name="wmode" value="opaque" />参数添加opaque值，但我忘记了某些浏览器使用了wmode标记:)只需将您的YT嵌入部件更改为这样（您会注意到embed参数作为wmode的一部分）

embed

Answer 2

我不能保证它会起作用†，但你基本上想要在相对定位的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！

Answer 3

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

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

Answer with 52+ score to the issue here

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

3 个答案: