覆盖在响应式视频之上答案

【问题标题】：overlay on top of a responsive video覆盖在响应式视频之上
【发布时间】：2015-11-12 21:06:39
【问题描述】：

您好，我构建了一个响应式主题来嵌入 vimeo 视频。

这是我的 CSS：

.vimeo-container {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 max-width: 100%;
 height: auto;
}

.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这是我的html：

<div class="vimeo-container">
   <!-- video iframe goes here -->
</div>

它运作良好且反应灵敏。现在我想保持这种响应能力，但让这个视频看起来像一个背景，所以我想在上面添加一个带有文本的叠加层。类似于在this Site 上所做的事情。

如何保持响应性并添加带有文本的叠加层以使其与上述网站相似？

【问题讨论】：

标签： html css responsive-design html5-video overlay

【解决方案1】：

对于叠加层，您可以在容器内添加绝对定位的 DIV。我通过为 vimeo-container 提供 Fixed 位置对您的 CSS 进行了一些更改，使其更像全屏且响应更快，因为我看到底部有填充，我们可以看到主体的白色背景。

JSFIDDLE EXAMPLE

HTML：

<div class="vimeo-container">
   <div class="overlay">
       <div class="text-container">
           <h1>Hello World!</h1>
       </div>
   </div>
   <iframe src="https://player.vimeo.com/video/34905657?color=0fb0d4&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/34905657">Cowboy&#039;s Cat</a> from <a href="https://vimeo.com/animadetv">Animade</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>

CSS：

.vimeo-container {
 position: fixed;
 width: 100%;
 height: 100%;
 overflow: hidden;
 max-width: 100%;
}

.vimeo-container .overlay{
    position: absolute;
    width: 100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:999;
}

.vimeo-container .overlay .text-container{
    width:100%;
    text-align:center;
}

.vimeo-container .overlay .text-container h1{
    color:#FFF;
    text-transform:uppercase;
}

.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

【讨论】：

至于顶部和底部的黑条，我检查了一些 vimeo 视频进行验证，我相信这是 vimeo 代码的原生。阅读这篇文章的选择答案，更多关于 Vimeo 的信息stackoverlow link
一个快速的解决方案是将视频托管在您的服务器上并使用 hmtl5 视频标签添加它。这将提供完美的全屏效果，而无需在顶部和底部出现 Vimeo 的原生黑条，并且还会隐藏播放/暂停控件。由于它是一个循环视频（我会假设），而且它的大小会相当小，它不会要求用户提供太多带宽。无论如何，这只是一个建议！

【解决方案2】：

由于您的视频容器已经有位置：相对，您可以设置位置：绝对为您叠加视频：

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

以下是您的代码的工作小提琴示例：https://jsfiddle.net/Munja/d8w4o31k/

另外，你可以看看这个在 bg 中播放视频的小提琴示例：https://jsfiddle.net/Munja/dpfzhw1v/ 我在前一段时间正在开发的一个网站上使用了这个东西。

【讨论】：