Как сделать картинку вместо видео в WordPress (ну или в HTML)?

Question

[makaravich]

Стоит задача отобразить картинку, чтобы при щелчке на ней начинало воспроизводиться видео.
Образец: https://www.ptcwizard.com/parent-teacher-conferenc...
Может есть готовый плагин который умеет такое делать?

Answer 1

[Станислав]

Плагин тут будет излишним, достаточно использовать простенькую вещь вроде такой. Просто подключите эти два файла в вашей теме и далее используйте их так, как написано в инструкции. Есть совсем простой вариант, посмотреть можно здесь. Еще один вариант здесь. Приведу код второго варианта, на всякий случай:

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

Comments

[makaravich]

Отлично! Все работает.
Спасибо огромное, а то я с ног сбился в поисках решения.

Answer 2

[Maksym Davydchuk]

Так сделано на сайте что вы предоставили

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