title: How to contain a video?
body: <p>Quick question since I can't find it here.
  I have a video and I have attached it with the following code on html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>video {
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="banner"&gt;
    &lt;div class="banner-header"&gt;
      &lt;video poster="#" autoplay="true" loop&gt;
        &lt;source src="coding.mp4" type="video/mp4" /&gt;
      &lt;/video&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I try it out, my video shows, it plays and loops. Perfect. Except the size is so massive that I can scroll to the right and I no longer see the body just the background and the far right side of the video.</p>
  
  <p>I want the video to be smaller and to align properly with the whole responsive website. And below the video is pretty much the body of the website, which are my skills and contact details. So the video serves as a "header" even though I have a proper header with navigation buttons and what not.</p>