title: How to make responsive video container div?
body: <p>I'm trying to make video container div responsive but couldn't manage it so far.</p>
  
  <p>My current CSS for video and container:</p>
  
  <pre><code>   .header-container{
      width: 100% !important;
      height: auto !important;
      border-left: none;
      border-right: none;
      position: relative;
      padding: 20px;
  } 
  
      video-container{
      position: absolute;
      top: 0%;
      left: 0%;
      height: 100%;
      width: 100%;
      overflow: hidden;
  } 
  
       .video{
       position: absolute;
       z-index: -1;
       opacity: 0.78;
       widows: 100%;
       width: 100% !important;
       height: auto !important;
       margin:0 auto;
   } 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>      &lt;div class="header-container"&gt;
   &lt;div class="video-container"&gt;
      &lt;video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%;
      height: auto;"&gt;
           &lt;source src = "webd.mp4" type = "video/mp4" &gt;
           &lt;/video&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Current look:
  <a href="http://i.stack.imgur.com/500db.jpg" rel="nofollow">Current look</a></p>
  
  <p>Could you please tell me how can I fix it? I'm still new in HTML and CSS and I really need your help &amp; advice.</p>