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

【问题标题】：How to add a banner inside a div at the bottom?如何在底部的 div 中添加横幅？
【发布时间】：2016-02-09 19:54:39
【问题描述】：

我有this 网站。

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

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

Firefox 和 IE 看起来不错，但在 Chrome 或 Safari 上运行不佳，因为横幅太低且无法正确覆盖视频底部。

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

这就是我所拥有的

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

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

【问题讨论】：

遮住 youtube 徽标不是一个好主意，因为徽标可以免费使用...
为什么不直接使用 vimeo？还是 HTML5？
因为它不仅仅是隐藏徽标，我试图覆盖视频底部的一部分，因为全宽它太高了，如果我改变视频的高度，它会在每个视频上创建黑条侧面，因此它不再看起来全宽。使用 Vimeo 并不能解决高度问题，而使用横幅似乎可以工作，只要我可以正确定位它。

标签： javascript jquery html css youtube

【解决方案1】：

使用 Vimeo 或 HTML5。如果您只想删除 YouTube 徽标，那么这样做会少很多麻烦。您可以从 Youtube 下载视频，here

【讨论】：

这不仅仅是为了覆盖标志，它也是为了切断视频的一些底部，因为全宽视频太高了，如果我改变高度，每边都会出现黑条因此我使用的是 150 像素的横幅。如果只是用于徽标，则可能是 60 像素的横幅，但这并不能完全解决我的问题。

【解决方案2】：

另一个主题讨论在 youtube 视频上放置一个 div，这可能就是您要寻找的。p>

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

【讨论】：

不完全是，这个例子几乎就是我现在正在做的。我不认为使用 z-index 是解决方案。

【解决方案3】：

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

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

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

【讨论】：