title: Background video too big
body: <p>screenshot on phone</p>
  
  <p><a href="https://i.stack.imgur.com/8AsZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8AsZw.png" alt="on phone"></a></p>
  
  <p>screenshot on PC</p>
  
  <p><a href="https://i.stack.imgur.com/hnfuA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hnfuA.png" alt="on laptop"></a></p>
  
  <p>This is a video in a background. 
  <br></p>
  
  <p>the problem.
  <br> when the website is on fullscreen the video size is to big. I tried to make it smaller with margin top . but its cuts the video in half. the video has to stay in the orginal conditon on full screen and smal screen. how do I do this? </p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="videoContainer" class="half-black"&gt;
          &lt;div class="videoWrapper"&gt;
              &lt;video autoplay&gt;
                  &lt;source src="video/warwick.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="infoContainer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>CSS:</p>
  
  <pre><code>    #videoContainer{
      height:auto;
      background-color:darkslateblue;
      border-bottom:5px solid black;
  }
  #infoContainer{
      background-color:dodgerblue;
      height:40%;
  }
  
  .videoWrapper &gt; video {
    width: 100%;
    margin-top:-35%;
  
  
  }
  .videoWrapper{
    overflow: hidden;
  }
  </code></pre>