title: Video header in HTML and CSS
body: <p>I am creating a webpage that is supposed to have a <strong>video header</strong> in the top who stretches out to the screen on the with but only display 80% if the height, and then put text inside the header.</p>
  
  <p>I've succeeded in getting the video to loop and stretch out to the screen on the width and only display 80% of the screen height by surrounding it by a wrap that only displays 80% of the content.</p>
  
  <p>I haven't succeeded by trying to put the text upon the header by using "z-index"  header because I'm using "position: inherit" on the video, it works when I set the "position: absolute" but then the video displays more than it should!</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div id="headerContent"&gt;
      &lt;video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop&gt;
          &lt;source src="http://eyday.net/Titas%20Communications%20/Assets/1Intro_f_tablet.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
      Hello
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>#headerContent {
      width: 100%;
      height: 80%;
      overflow: hidden;
  }
  video {
      position: inherit;
      min-width: 100%;
      overflow: hidden;
      z-index: -1;
  }
  </code></pre>