title: Show div on top of background video tag
body: <p>I want to show my custom div on top of background video, how I can do it in a right way.</p>
  
  <pre><code>&lt;section&gt;
      &lt;video autoplay muted id="bgvid" loop&gt;
          &lt;source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4"&gt;
      &lt;/video&gt;
  
      &lt;div class="info"&gt;
          &lt;h1&gt;Welcome dear Friend&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="about" id="about" data-content="about"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I created next style but my class="info" is just under video.</p>
  
  <pre><code>video { 
      position:fixed;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
   /*background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;*/
    background-size: cover;
    transition: 1s opacity;
  }
  
  section {   
      position: relative;
  }
      section.video 
      {
          /*height:400px;*/
      }
  
      section.about 
      {
          background-image:url(../Images/backgrounds/blue.jpg);
          background-repeat:repeat;
          height:400px;
      }
  
  
  
  .info { 
      /*position: absolute;z-index:1000;*/
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    background: rgba(0,0,0,0.3);
    color: white;
    padding: 2rem;
    width: 33%;
    margin:2rem;
    float: right;
    font-size: 1.2rem;
  
  }
  h1 {
    font-size: 3rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .3rem;
  }
  </code></pre>
  
  <p>In case position fixed for video it is going down about section.</p>