【问题标题】: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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2012-02-22
          • 2012-03-25
          • 2012-06-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-12-23
          相关资源
          最近更新 更多