title: IE z-index issue with iframe
body: <p>I'm having a Youtube video iframe cover the whole window (100% width and height) and i have the rest of the elements scroll over the video.
  Everything works fine on Chrome and Firefox but IE doesn't seem to respond to z-index.</p>
  
  <p>I've created a jsFiddle here <a href="http://jsfiddle.net/RickyStam/42tLS/" rel="nofollow">http://jsfiddle.net/RickyStam/42tLS/</a> where you can see the problem.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="page-container"&gt;
          &lt;div&gt;
              &lt;div class="header"&gt;
                  &lt;a href="/index.aspx"&gt;&lt;img src="Images/logo.png" /&gt;&lt;/a&gt;
                  &lt;div class="menu-container"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;solutions&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;about us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="video-container"&gt;
                  &lt;iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&amp;showinfo=0&amp;controls=0" wmode="Opaque" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                  &lt;div class="video-container-text"&gt;
                      &lt;h1 class="regularfonts"&gt;LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM&lt;/h1&gt;
                      &lt;p&gt;LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="width: 100%; height: 685px; z-index: 12"&gt;&lt;/div&gt;
          &lt;div class="aboutus-container"&gt;
              &lt;h1&gt;ABOUT US&lt;/h1&gt;
              &lt;p&gt;LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUMLOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM&lt;/p&gt;
              &lt;p&gt;
                  LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM&lt;br /&gt;
                  LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
              &lt;/p&gt;
              &lt;p&gt;LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.page-container {
          width: 100%;
      }
  
      .header {
          background: black;
          height: 80px;
          width: 100%;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 11;
      }
  
      .video-container {
          position: fixed;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          text-align: center;
      }
  
      .video-player {
          width: 100%;
          height: 100%;
      }
  
      .video-container-text {
          position: absolute;
          top: 0px;
          width: 100%;
          height: 100%;
          background-image: url('../Images/check_black.png');
          padding-top: 200px;
          box-sizing: border-box;
      }
  
          .video-container-text h1 {
              font-size: 18px;
              padding: 20px 30px;
              background-image: url('../Images/check_black.png');
              border-left: 2px solid #cf0103;
              border-right: 2px solid #cf0103;
              display: inline-block;
          }
  
  
  
      .aboutus-container {
          height: 270px;
          background: #292929;
          text-align: center;
          position: relative;
          z-index: 10;
      }
  
          .aboutus-container h1 {
              font-size: 25px;
              display: inline-block;
              margin-top: 45px;
              margin-bottom: 20px;
          }
  </code></pre>
  
  <p>Any help will be much appreciated!</p>