Another HTML5 Video Example

Huge shout-out of thanks to Faruk Ates (@KuraFire) for JavaScript/CSS ninja work to help with this illustration.

The Current Code:

<style type="text/css"> 
	video.inactive {
		position:absolute; top:100px; left:100px;
	}
	video.active {
		position:absolute; top:100px; left:100px;;
	}
    img {
		position:absolute; top:100px; left:100px!important; height:328px; width: 480px;
		-webkit-transition: opacity .4s ease-out;
		-moz-transition: opacity .4s ease-out;
		-o-transition: opacity .4s ease-out;
		transition: opacity .4s ease-out;
	}
 
	</style> 

---

	
	<script>  
var vid = document.getElementById('vid');
vid.addEventListener('play', toggle, false);
function toggle(){
	console.log('toggle called');
	this.className = (this.paused) ? "inactive" : "active";
	document.getElementById('poster-img').style.cssText = "opacity:0;";
}
	</script>