title: Full-width vimeo wrapper background
body: <p>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.</p>
  
  <p>Html
       </p>
  
  <pre><code> &lt;div class="video"&gt;    
      &lt;iframe src="//player.vimeo.com/video/82123812?title=0&amp;amp;byline=0&amp;amp;portrait=0&amp;amp;color=3a6774&amp;amp;autoplay=1&amp;amp;loop=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;  
      &lt;div class="overlay"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>