title: HTML video to cover 100% div
body: <p>I have an HTML video that I want to use as replacement for a background image that would be fullscreen, However currently it overflows and covers the entire page instead of just the constraints of the header. </p>
  
  <p>html:</p>
  
  <pre><code> &lt;header id="masthead" class="site-header" role="banner"&gt;
          &lt;video autoplay loop poster="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/img/main.jpg" id="bgvid"&gt;
              &lt;source src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/vid/dumbells.webm" type="video/webm"&gt;
              &lt;source src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/vid/dumbells.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>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;
          -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          background: url(img/main.jpg) no-repeat;
          background-size: cover;
      }
  
      .site-header {
          left: 0px;
          top:0px;
          z-index: 1;
          float: none;
          width: 100%;
          height: 100%;
          overflow:hidden;
          text-align:center;
          padding: 130px 0 141px;
      }
  </code></pre>
  
  <p>Does anyone know what i have to do, to allow it just to fill the size of my header container? There's a few questions on a similar subject but none seem to answer my specific query. </p>