Making my video header responsive
<p>Alright, so my website has a video header. I want it to be responsive when shrinking the browser ( or in mobile view ), how can I do that? It works great when looking at it on my monitor but as soon as I shrink the browser window, the video becomes small and a huge white space appears underneath it ( about 500px high ).
Here's the code: </p>

<pre><code>    &lt;div class="header-container"&gt;
        &lt;div class="video-container"&gt;
            &lt;video muted preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png"
                &lt;source src="video/drift.mp4" type="video/mp4"&gt;
                &lt;/video&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

 .header-container {
    width: 100%;
    min-height: 1000px;
    border-left: none;
    border-right: none;
    position: relative;
    margin-top: 0;
}

.video-container {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 1000px;
    width: 100%;
    overflow: hidden;
}

video {
    position: absolute;
    z-index: -1;
    opacity: 0.78;
    width: 100%;
}

.header-container h1 {
    color: #3cbc8d;
    z-index: 1;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10%;
    border: 3px solid #fffff;
    padding: 10px;
    border-radius: 15px;
    width: 700px;
    letter-spacing: 3px;
    font-size: 100px;
    font-family: 'Montserrat', sans-serif;
    }

.header-container h2 {
    color: #3cbc8d;
    z-index: 1;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid #fffff;
    padding: 10px;
    border-radius: 15px;
    width: 700px;
    letter-spacing: 3px;
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
        }

    &lt;div class="header-container"&gt;
        &lt;div class="video-container"&gt;
            &lt;video preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png"
                &lt;source src="video/cruise1.mp4" type="video/mp4"&gt;
                &lt;/video&gt;
                        &lt;h1&gt;3P4B&lt;/h1&gt;
                            &lt;h2&gt;Portable Power Pack for Boating&lt;/h2&gt;
                            &lt;div class="letsgo"&gt;
                                &lt;a href="#about" class="btn btn-sample hvr-pulse " role="button" style="font-size: 3.5em; border-radius: 50px; text-align: center;"&gt;&lt;span class="glyphicon glyphicon-arrow-down"&gt;&lt;/span&gt;&lt;/a&gt;
                                &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>