htmlcssiframevideofluid-layout

Full-width vimeo wrapper background


I am trying to create a full-width iframe vimeo background covered by a pattern located in my body div. The video is covered by an overlay so it becomes unclickable. Ive tried giving the video 100% width and height yet no luck on covering the screen.. I am trying to have the videos pop up at 500x250 px.

Html

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

CSS

.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.video .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/overlay-pattern.png) repeat;
}

Solution

  • You need to set the width and height of the iframe as well as its wrapper. I've also added some z-indexes for luck!

    Hey diddle diddle, here is a fiddle: http://jsfiddle.net/n28Ef/1/

    .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: url(../img/overlay-pattern.png) repeat;
    }