наложение поверх отзывчивого видео

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

Для наложения вы можете добавить абсолютный атрибут DIV внутри вашего контейнера. Я немного изменил свой CSS, чтобы сделать его более полноэкранным и более отзывчивым, предоставив фиксированную позицию в vimeo-контейнере, потому что я увидел, что внизу есть прокладка, и мы можем видеть белый фон тела.

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

Answer 2

С вашего видео контейнера уже есть позиция: относительная, вы можете установить положение: абсолютный для вас слой над видео:

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

Вот рабочая скрипку exampple с кодом: https://jsfiddle.net/Munja/d8w4o31k/

Кроме того, вы можете взглянуть на этот пример скрипта с воспроизведением видео в bg: https://jsfiddle.net/Munja/dpfzhw1v/ Я использовал именно эту вещь на одном веб-сайте, над которым я работал некоторое время назад.