title: Full height video header
body: <p>I am trying to make a header responsive with video background like <a href="http://markup.themewagon.com/titan/index_mp_fullscreen_video_background.html" rel="nofollow noreferrer">this</a></p>
  
  <p>But I don't want to embed youtube or something else. I just want a short video as a background and for it to be responsive.</p>
  
  <p>Here is my code so far. My problem is that it is not sticking to full height when I test on mobile, tablet, etc.</p>
  
  <pre><code>&lt;header&gt;
      &lt;video poster="pic.jpg" loop="loop" preload="auto" autoplay="autoplay" volume="0"&gt;
          &lt;source src="pic.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
  &lt;/header&gt;
  
  header {
      position: relative;
      height: 100%;
      width: 100%;
  }
  video {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     overflow: hidden;
     height: auto;
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://imgur.com/a/U3tFf" rel="nofollow noreferrer">http://imgur.com/a/U3tFf</a> The problem.</p>