title: materializecss - video in the background
body: <p>I want the video to be played only in div "index -banner " , but it is being played in full page until you reach the footer .
  Already I tried everything without success.</p>
  
  <p>Example: <a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video" rel="nofollow">background</a></p>
  
  <pre><code>&lt;!-- Video --&gt;
    &lt;div class="section no-pad-bot" id="index-banner"&gt;
      &lt;div class="container"&gt;
  
        &lt;div class="col s12 m4"&gt;
            &lt;div class="icon-block"&gt;
              &lt;h2 class="center light-blue-text"&gt;&lt;i class="material-icons"&gt;group&lt;/i&gt;&lt;/h2&gt;
              &lt;h5 class="center"&gt;User Experience Focused&lt;/h5&gt;
  
              &lt;p class="light"&gt;Text&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;video autoplay loop id="bgvid"&gt;
              &lt;source src="video/fundo.webm" type="video/webm"&gt;
              &lt;source src="video/fundo.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Code CSS:</p>
  
  <pre><code>video#bgvid { 
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -ms-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  }
  </code></pre>