Html Youtube嵌入视频z索引

我在我的网站上嵌入了一段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上，当您单击下面旋转木马的第一个缩略图时，模式显示在视频下方

我建议您使用以下内容添加另一个元素：

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

---

它可以工作。

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

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

像素取决于要将图像放置在何处。希望这对您有用。

您的“立即播放！”按钮正按照您的指示执行。在css中，您告诉“.video wrapper.play now”以与相对位置最近的父级（即“.flex video”）的底部以-40px对齐。将“.video wrapper.play now”设置到一个像200px一样合理的底部

.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;
}

---

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

HTML

---

问题在于“立即播放！”按钮显示在视频下方。

-您希望它显示在哪里？希望它像在Chrome和FF中一样出现在视频上。此外，模式弹出窗口显示在所有内容的顶部。“立即播放！”也显示在Chrome和FF的视频下方。也许这可以解决你的问题。@JamesDeadman似乎在IE10中工作得很好。你用的是什么版本？另外，发布视频代码和按钮，以便我们提供更好的帮助。

.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;
}

<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>

#container{
    position: relative;
}

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