Question

我有这个HTML：

<div class="frame" id="play">
    <img src="images/click.png" alt="facebook">
</div>
<div class="frame" id="maru">
    <iframe width="418" height="278"
        src="http://www.youtube.com/embed/hPzNl6NKAG0"
        frameborder="0" allowfullscreen>
    </iframe>
</div>

和这个css：

.frame {
    width: 420px;
    height: 280px;
    position: absolute;
}

#play {z-index: 100}
#maru {z-index: 1}

为什么图片会在youtube视频下面显示？

Answer 1

简单...在ID视频之后放置？wmode = opaque ....在IFRAME的src ...

示例：

<iframe width="418" height="278"
src="http://www.youtube.com/embed/hPzNl6NKAG0?wmode=opaque"
frameborder="0" allowfullscreen>

Answer 2

您尚未正确关闭图像锚点，但我认为不是这样。

它出现在视频下方，因为你把它放在一个不同的div中，并且两者都有相同的类，这意味着两个div都有自己的大小。试试这个：

HTML 的

 <div id="vidFrame" class="play">
 <iframe width="418" height="278"
 src="http://www.youtube.com/embed/hPzNl6NKAG0"
 frameborder="0" allowfullscreen>
 <img src="images/click.png" alt="facebook" />
      </iframe>
      </div>

CSS

     #frame {
       width: 420px;
       height: 280px;
      position: absolute;
        }

 .play {z-index: 100}
 .maru {z-index: 1}

不确定这是否有用，但这就是我想要的。

youtube iframe上方的图片，是否可能？

2 个答案: