How to make an image instead of a video in WordPress (well, or in HTML)?

Question

Video

The task is to display the image so that when you click on it, the video starts playing.
Sample: https://www.ptcwizard.com/parent-teacher-conferenc...
Maybe there is a ready-made plugin that can do this?

Answer 1

The plugin here will be redundant, it is enough to use a simple thing like this . Just include these two files in your theme and then use them as written in the instructions. There is a very simple option, you can see it here . Another option is here . I will give the code of the second option, just in case:
HTML:

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

JS:

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

CSS:

video{
  display:block;
  width:300px;
  height:200px;
}

Answer 2

This is how it is done on the site that you provided

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

On click

function() {
  $('#player1').width($('img#playimage').width());
  $('#player1').height($('img#playimage').height());
  $('#videoDiv').show();
  $('#playimage').hide();
  player1.playVideo();
}