title: fixed background doesn't work when I add video header (chrome)
body: <p>You can see background effect here: <a href="https://jsfiddle.net/xorkme75/embedded/result/" rel="nofollow noreferrer">https://jsfiddle.net/xorkme75/embedded/result/</a></p>
  
  <p>background is <code>fixed</code> here. so when you scroll the page, you can see rest of the image. for example scroll down and you can see the lady's face.</p>
  
  <p>Works both chrome and firefox.</p>
  
  <p>But when I add video to header. This effect not working in chrome anymore. Here is example (please see in chrome): <a href="http://areafordemos.net63.net/chrome.html" rel="nofollow noreferrer">http://areafordemos.net63.net/chrome.html</a></p>
  
  <p><strong>How did I break it?</strong></p>
  
  <p>I added to CSS:</p>
  
  <pre><code>#video-container {  
      top: 10%;
      width:100%;
      height:70%;
      overflow: hidden;
      z-index:-1; 
      }
  
  video.fillWidth {
      width:100%;
      }
  </code></pre>
  
  <p>and I added to HTML:</p>
  
  <pre><code>&lt;div id="video-container"&gt;
      &lt;video autoplay muted loop paused class="fillWidth"&gt;
          &lt;source src="xhttp://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/&gt;
          &lt;source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/&gt;
          Your browser does not support the video tag. I suggest you upgrade your browser.
      &lt;/video&gt;
  &lt;/div&gt;&lt;!-- end video-container --&gt;
  </code></pre>
  
  <p>CSS Code of broken area:</p>
  
  <pre><code>.dzen_bg {
  background-image: url('http://seventhqueen.com/themes/kleo/sensei-e-learning/wp-content/uploads/sites/6/2015/06/hero16.jpg'); 
  background-size: 100% 100%;
  background-repeat: no-repeat; 
  background-position: 100% 12px; 
  background-attachment: fixed;
  padding-top: 10px; 
  background-size: 100% 100%;
  } 
  </code></pre>
  
  <p>When I delete <code>width: 100%;</code> from <code>video.fillWidth</code> for example effect is back but video doesn't look like I want. So I am literally stuck. </p>
  
  <p><strong>What have I tried so far?</strong></p>
  
  <p>I- I tried to add <code>z-index:-2;</code> to <code>.dzen_bg</code>. It actually solved it. But another problem occurred. After that, I can't hover the inside of that div <code>.dzen_bg</code> anymore. Doesn't respond to mouse moves. </p>
  
  <p>II- I deleted  <code>height: 70%</code> in <code>#video-container</code>. Solves the problem as well but how I will set video height right now? It is covering the whole screen now. I also tried to  set <code>height: 70%</code> to <code>video.fillWidth</code> after but video doesn't cover the screen anymore. </p>
  
  <p>I have never puzzled that much. Is there any solution for this problem?</p>