HTML5 Layered Videos

Videos layered on top of each other using z-indexes.

HTML

<div id="over">
	<video autoplay loop>
		<source src="minion1.mp4"></source>
	</video>
</div>
<div id="over2">
	<video autoplay loop>
		<source src="minion2.mp4"></source>
	</video>
</div>
<video autoplay loop id="myvideo">
	<source src="152_0030.mp4"></source>
</video>

CSS

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; 
}

JavaScript

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
 } else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}