Question

我已使用以下代码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>

问题是＆＃34;现在开始玩！＆＃34;按钮显示在视频下方。同样在IE上单击下面旋转木马的第一个缩略图时，模式显示在视频下方。

Answer 1

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

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

在css中：

margin-top:-/*something*/px

它可以工作。

Answer 2

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

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

像素取决于您想要放置图像的位置。希望这对你有用。

Answer 3

你的＆＃34;现在玩！＆＃34;按钮正在完成您告诉它要做的事情。在你的CSS中，你告诉＆＃34; .video-wrapper .play-now＆＃34;从最近的相对定位的父母的底部对齐-40px，这是＆＃34; .flex-video＆＃34;。设置＆＃34; .video-wrapper .play-now＆＃34;到像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;
}

Answer 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

Youtube嵌入式视频z-index

4 个答案: