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

以下是您的代码：https://jsfiddle.net/Munja/d8w4o31k/

的工作小提琴示例

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

Answer 2

对于叠加层，您可以在容器中添加绝对定位的DIV。我通过给vimeo容器提供一个固定位置来改变你的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%;
}

覆盖在响应式视频之上

2 个答案: