Adding Text overlay to my Vimeo Full Screen Background -iframe-

Question

Currently I am working on a full video background setup. This is a newbie question. I want to add text over the video. I Did search on here for some tutorials and tried a few things but just could not get it to work.

Code:

<div class="video"><iframe allowfullscreen="" frameborder="0" height="540"            mozallowfullscreen="" src="//player.vimeo.com/video/99315264? title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" webkitallowfullscreen="" width="960"></iframe>


    <style type="text/css">body {
    margin: 0;
    padding: 0;
     }
    .Video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%}


     .Video iframe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    }

    .Video .Overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0);
    }
    </style>

The code is working perfect however I wanted to add some text overlay. I have been reading tutorials however I just cannot seem to find the right fit. Easy question I am sure. Thank you for your help.

Also when using this format

example:

 <video autoplay loop>
 <source src=”loop.mp4” type=”video/mp4”>
 <source src=”loop.webm” type=”video/webm”>
 <source src=”loop.ogv” type=”video/ogg”>
 </video> 

the vimeo video did no load correctly- 404 error- so I used the iframe setup instead-- seems to be the trick. I am using the Vimeo video because I have a paid account which allows me to customize the video settings and play it in full HD.

Thanks again.

my video http://lmdesigns.x10host.com/Designtest.html

Answer 1

You have to set a div to absolute, and from there position it inside of the container div with a higher z-index than the video element.

.text-div {
    text-align: center;
    position: absolute;
    height: 97px;
    width: 80%;
    z-index: 3; 
    margin-left: 10%;
    margin-right: 10%;
    border: 3px solid #fff;
}

Answer 2

I ended up using this code for the overall video setup

  <style>
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
    </style>
    <div class="videoWrapper">
<iframe src="//player.vimeo.com/video/99315264?    title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="500%" height="291%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

worked perfect. Now moving on to the text. Very fun project I appreciate your inputs. It is funny because there was a lot of different ways to do this with code. Was a task trying to find the right way.

http://lmdesigns.x10host.com/Designtest.html