CODEWITHSUNDEEP
htmlcssresponsive-designhtml5-videooverlay
Chad
Chad

Reputation: 13

overlay on top of a responsive video

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?

Upvotes: 1

Views: 10582

Answers (2)

IndieRok
IndieRok

Reputation: 1788

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

Upvotes: 2

Dejan Munjiza
Dejan Munjiza

Reputation: 798

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.

Upvotes: 1

Related Questions