iframe - 如何在嵌入的 youtube 剪辑上 float png

Question

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

问题是“屏幕”不是正方形:图片有轻微的鱼眼效果，所以没有一条边是直的，边角是圆的。我不介意某些 iframe 隐藏在电视机的 png 后面——这就是我尝试这样做的原因! -- 但 iframe 保持在顶部。

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

编辑

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

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

Answer 1

如果我没猜错，您希望能够将东西放在您的“屏幕”“上方”，这基本上是一个嵌入式 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>