12

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;
}
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
notcho nachos
  • 187
  • 1
  • 2
  • 13

2 Answers2

27

This solution replicates the css property background-size: cover, using an iframe instead of an image, in full CSS.

First, put your vimeo iframe in a wrapper:

<div class="iframe-wrapper">
  <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
</div>

Then apply those styles:

/* Makes a fixed background wrapper
which the user cannot interact with */

.iframe-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/

.iframe-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

In addition, in the case of Vimeo, a pro account gives you the ability to remove the player's controls.

Christophe Marois
  • 6,471
  • 1
  • 30
  • 32
  • 1
    Kudos for cueing me in on the vh/vw viewport dimensions. Was stumbling over this until I remembered those! Thanks! – Ryan Weiss Jul 01 '16 at 20:35
  • 1
    This solution worked best for me. In order to make it fit in a container, I used `position: absolute` on `.iframe-wrapper` and `min-height: 100%` on the `iframe`. If you use `min-height: 100vh` and the window is shorter than the container, it won't fill the height of its container, if that type of layout matters to you. – kylesimmonds Nov 08 '16 at 05:21
  • 2
    Thanks! I was looking for something like this for hours today! – Torben Jan 12 '17 at 19:39
  • 1
    This should be marked as the accepted solution, works with resizing as long as the aspect ratio is 16:9. – Lorentz Mar 28 '17 at 14:41
  • 1
    Thank you so much! This fixed it for me too. – i-know-nothing Apr 13 '20 at 21:29
25

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;
}
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
Josh Harrison
  • 5,927
  • 1
  • 30
  • 44