Question

我有this网站。

我有div个嵌入YouTube视频，我试图用横幅隐藏视频的下半部分，以便覆盖底部显示的YouTube徽标。

我为横幅添加了另一个div，我使用了z-index和position: absolute; top:700px;使其叠加在视频上但这使得横幅位置在所有浏览器上都不可预测。

Firefox和IE看起来不错，但在Chrome或Safari上效果不佳，因为横幅太低而且没有正确覆盖视频的底部。

我还能如何做到这一点，以便它适用于所有浏览器？基本上我只需要横幅叠加在视频的底部，以便它覆盖我想隐藏的区域。

这是我拥有的

＆＃13;

.embed-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: -80px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  z-index: -1;
}

.mask {
  position: absolute;
  top: 700px;
  right: 0px;
  width: 100%;
  height: 150px;
  background-color: #ef1446;
  z-index: 11;
}

.bottom {
  bottom: 0;
}

＆＃13;

<div id="lgvid" class='embed-container'>
  <div class='over'></div>
  <style>
    .embed-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100%;
    }
    
    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>

  <div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
  <br><br>
  <center>
    <h1 style="color:white;">¿Que estas buscando?</h1>
  </center>
</div>

＆＃13;

Answer 1

使用Vimeo或HTML5。如果您想要删除YouTube徽标，那么这样做就不那么麻烦了。您可以从Youtube下载视频，numpy.tostring

Answer 2

另一个主题讨论了在youtube视频上放置div，这可能就是你要找的东西。

How to show a div over a Youtube video (z-index)?

Answer 3

[已解决]我的主要问题是当使用z-index来堆叠我的div时，横幅在Chrome和Safari上的位置不同。在这两个浏览器中，横幅水平低于I.E.和Firefox。

我通过使用此处找到的浏览器特定的CSS黑客解决了这个问题：http://rafael.adm.br/css_browser_selector/

浏览器特定的CSS hack允许我将横幅放置在我想要的那两个横幅不合适的浏览器的确切位置。我仍然在所有浏览器的所有样式集中使用z-index，这与Chrome和Safari特定CSS的顶部边距略有不同。

如何在底部的div中添加横幅？

3 个答案: