JSFiddle - React, Tailwind, and code Playground

by Sir_Moustache

HTML

<div id="video_holder">
    <div id="overlay"></div>
    <video poster="smartis_des-2.png" tabindex="0" width="600" height="400" id="video">
    <source src="first.mp4" width="600" height="400" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />          
    </video>
</div>

CSS

#video_holder{
    position: relative;
    width: 600px;
    height: 400px;
}
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: url('http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2010/01/play1-150x150.png') 50% 50% no-repeat;   
}
#overlay.o{
    background: none;
}

JavaScript

var overlay = document.getElementById('overlay');
var vid = document.getElementById('video');

if(overlay.addEventListener){
		overlay.addEventListener("click", play, false)
	}else if(overlay.attachEvent){
		overlay.attachEvent("onclick", play)
	}

function play() { 
    if (vid.paused){
        vid.play(); 
        overlay.className = "o";
    }else {
        vid.pause(); 
        overlay.className = "";
    }
}