Youtube 嵌入式视频 z-index答案

【问题标题】：Youtube embeded video z-indexYoutube 嵌入式视频 z-index
【发布时间】：2014-04-17 10:27:52
【问题描述】：

我已经在我的网站http://jdwebmanagement.com/draft/united_football/ 上嵌入了一个 YouTube 视频，代码如下：

<iframe width="664" height="390" src="https://www.youtube.com/v/JfYn1og9p-U?autoplay=1&version=3&loop=1&playlist=JfYn1og9p-U&rel=0" frameborder="0" allowfullscreen></iframe>

问题在于“立即播放！”按钮显示在视频下方。同样在 IE 上，当您单击下方轮播的第一个缩略图时，模式会显示在视频下方。

【问题讨论】：

The problem is that the "Play Now!" button displays under the video. - 你希望它出现在哪里？
寻找它出现在视频上，就像它在 Chrome 和 FF 中一样。还有模态弹出窗口显示在所有内容之上。
“立即播放！”也显示在 Chrome 和 FF 中的视频下方。
stackoverflow.com/questions/9074365/… 也许这可以解决你的问题。
@JamesDeadman 似乎在 IE10 中运行良好。你用的是什么版本？另外，请发布您的视频和按钮代码，以便我们提供更好的帮助。

标签： html css z-index

【解决方案1】：

我建议您使用类似这样的方式添加另一个元素：

<iframe></iframe><!--Under this-->
<div>button</div>

在 css 中：

margin-top:-/*something*/px

它可以工作。

【讨论】：

【解决方案2】：

您可以在 style.css 中添加此代码

.video-wrapper .play-now 
{
margin-top: -150px;
}

像素取决于你想把你的图像放在哪里。希望这对你有用。

【讨论】：

【解决方案3】：

您的“立即播放！”按钮正在做你告诉它做的事情。在您的 CSS 中，您告诉“.video-wrapper .play-now”在距离最近的相对定位的父级（即“.flex-video”）的底部 -40px 处对齐。将“.video-wrapper .play-now”设置为有意义的底部，例如 200 像素。

.video-wrapper .play-now {
      display: block;
      width: 254px;
      height: 115px;
      background: url(../images/play-now.png) no-repeat;
      position: absolute;
      bottom: -40px;
      left: 32%;
      z-index: 10;
}

这需要改为：

.video-wrapper .play-now {
      display: block;
      width: 254px;
      height: 115px;
      background: url(../images/play-now.png) no-repeat;
      position: absolute;
      bottom: 200px;
      left: 32%;
      z-index: 10;
}

【讨论】：

【解决方案4】：

您需要提供模态代码，以便我们能够更好地为您提供帮助。对于问题的另一部分，我想这就是您要寻找的。修改它以满足您的需要：

HTML

<div id="container">
    <iframe width="664" height="390" src="https://www.youtube.com/v/JfYn1og9p-U?autoplay=1&version=3&loop=1&playlist=JfYn1og9p-U&rel=0" frameborder="0" allowfullscreen></iframe>
    <button id="play">Play Now</button>
</div>

CSS

#container{
    position: relative;
}

#play {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -100px;
}

FIDDLE

【讨论】：