<h3>click on picture</h3>
<video poster="http://i.imgur.com/NDOYT4L.jpg">
<source src="http://video.dailymail.co.uk/video/mol/2015/11/07/2829942071241294818/640x360_2829942071241294818.mp4" type="video/mp4">
</video>document.querySelector("video").onclick = function(){
if(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2){
this.pause();
this.controls = false;
}
else if(this.paused){
this.play();
this.controls = true;
}
}video{
display:block;
width:300px;
height:200px;
}
<div class="col-lg-8">
<img id="playimage" class="img-responsive" src="assets/img/screen-login-play.png" alt="Using our step-by-step program your school can set up a parent teacher conference in just a few minutes.">
<div id="videoDiv" class="col-lg-12" style="display:none">
<iframe id="player1" src="https://www.youtube.com/embed/uWlLvYknOcE?enablejsapi=1&theme=light&showinfo=0" width="630" height="354" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"></iframe>
</div>
</div>function() {
$('#player1').width($('img#playimage').width());
$('#player1').height($('img#playimage').height());
$('#videoDiv').show();
$('#playimage').hide();
player1.playVideo();
}
