overlay on top of a responsive video

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?

score 2 · Accepted Answer · answered Nov 12 '15 at 21:51

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

As for the black bars on top and bottom, I've checked a few vimeo videos to validate and I do believe this is native to vimeo's code. Read the chosen answer to this post, more information about Vimeo [stackoverlow link](http://stackoverflow.com/questions/19794000/removing-black-borders-on-a-vimeo-iframe-embed-using-css) — IndieRok, Nov 12 '15 at 22:08
A quick solution would be to host the video on your server and add it by using the hmtl5 video tag. This would provide a perfect fullscreen effect without the hassle of Vimeo's native black bars on top and bottom and would also hide the play/pause control. Since it's a looping video (i would assume), and it's size will be rather small, it would not demand much bandwidth from the user. Anyway, it's just a suggestion! — IndieRok, Nov 13 '15 at 21:04

score 1 · Answer 2 · answered Nov 12 '15 at 21:37

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.

overlay on top of a responsive video

2 Answers2