title: Full Screen Layered Videos Using Z-Index
body: <p>I'm currently working with a project where I need to layer 2 possibly 3 videos over top of each other. I've been able to do this with Flash as well as video using the html5 video tag and Z-indexes, but when I hit F11 to go full screen all I can see is the first video ie the first layer that is supposed to have the layered videos on top of. The criteria of my project requires that upon f11 my project to launch with the layers as they were built. I tried giving my top 2 videos a super high z-index which I read would work, but no dice. </p>
  
  <p>I made a fiddle that has 1 video set as a background and 2 positioned over top. Again this works until I hit f11 to go full screen. It seems to just be rendering the bottom or background video over top of all z-indexes.</p>
  
  <p><a href="https://jsfiddle.net/lukeslytalker/j1ssLqvj/2/" rel="nofollow" title="jsfiddle example">https://jsfiddle.net/lukeslytalker/j1ssLqvj/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="over"&gt;
  &lt;video autoplay loop&gt;
      &lt;source src="minion1.mp4"&gt;&lt;/source&gt;
  &lt;/video&gt;
  &lt;/div&gt;
  &lt;div id="over2"&gt;
  &lt;video autoplay loop&gt;
      &lt;source src="minion2.mp4"&gt;&lt;/source&gt;
  &lt;/video&gt;
  &lt;/div&gt;
  &lt;video autoplay loop id="myvideo"&gt;
  &lt;source src="152_0030.mp4"&gt;&lt;/source&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body { 
  margin:0; 
  padding:0; 
  overflow:hidden; 
  }
  #over {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10005; 
  }
  #over2 {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10000; 
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script&gt;
  var elem = document.getElementById("myvideo");
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
  } else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
  }
  &lt;/script&gt;
  </code></pre>