How to make responsive video container div?
<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>