overlay on top of a responsive video - html

Question

Hi I built a responsive theme to embed vimeo videos.
Here is my 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%;
}
And here is my html:
<div class="vimeo-container">
<!-- video iframe goes here -->
</div>
It works well and is responsive. Now I want to keep this responsiveness but make this video look like a background, so I thought of adding an overlay with text on top of it. Something like what is done on this Site.
How to keep the responsiveness and add an overlay with text to make it similar to the mentioned site above?

Answer 1

For the overlay, you can add an absolutelty postionned DIV inside your container. I changed your CSS a bit to make it more fullscreen-like and more responsive by giving a Fixed position to the vimeo-container, because I saw that there was padding at the bottom and we could see the white background of the body.
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>Cowboy's Cat from Animade on Vimeo.</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

Since your video container already have position: relative, you can set position:absolute for you layer over video:
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
Here is a working fiddle exampple with your code: https://jsfiddle.net/Munja/d8w4o31k/
Also, you can take a look on this fiddle example with video playing in bg: https://jsfiddle.net/Munja/dpfzhw1v/ I used exactly this thing on one website I was working on some time ago.