覆盖在响应式视频之上

Question

您好，我构建了一个响应式主题来嵌入 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 上所做的事情。

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

Answer 1

因为你的视频容器已经有了 position: relative，你可以设置 position:absolute 为你在视频上分层：

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

这是一个使用您的代码的工作 fiddle 示例：https://jsfiddle.net/Munja/d8w4o31k/

此外，您可以看一下这个 fiddle 示例，在背景中播放视频：https://jsfiddle.net/Munja/dpfzhw1v/ 我以前在一个网站上使用过这个东西。

Answer 2

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

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

覆盖在响应式视频之上

overlay on top of a responsive video

html

css

overlay

html5-video

responsive-design