Как автоматически воспроизвести видео после нажатия на изображение?

Question

Я использую приведенный ниже код в редакторе WordPress.С моим текущим кодом, когда я нажимаю на изображение, отображается фактическое видео, и мне нужно щелкнуть видео еще раз, чтобы воспроизвести его.

Я хочу изменить его так, чтобы изображение видео отображалось и когдаЯ нажимаю на то, что видео должно начать воспроизводиться.Я просто должен нажать один раз.Прямо сейчас я должен нажать дважды, что плохо для пользователя.Это необходимо для сокращения времени загрузки страницы.

<div class="youtube" id="PpMS2SP_3Fs" style="width:100%; height: 600px;"></div>
<script>
  var videos = document.getElementsByClassName("youtube");

  for (var i = 0; i < videos.length; i++) {
    var youtube = videos[i];
    var img = document.createElement("img");
    img.setAttribute("src", "https://www.sociosquares.com/wp-content/uploads/2019/04/vid-img1-opti.jpg");
    img.setAttribute("class", "thumb");

    var circle = document.createElement("div");
    circle.setAttribute("class", "circle");

    youtube.appendChild(img);
    youtube.appendChild(circle);

    youtube.onclick = function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&loop=1&playlist=PpMS2SP_3Fs");
      //"https://www.youtube.com/embed/PpMS2SP_3Fs?autoplay=1&loop=1&playlist=PpMS2SP_3Fs");

      iframe.style.width = this.style.width;
      iframe.style.height = this.style.height;

      this.parentNode.replaceChild(iframe, this);
    };
  }
</script>

Я ожидал, что видео будет воспроизводиться автоматически после нажатия на изображение, но это не так, и я должен нажать еще раз, чтобы воспроизвести видео.

Answer 1

jQuery('#image_id').click(function() {
  jQuery(".youtube").attr('src', jQuery(".youtube", parent).attr('src') + '?autoplay=1'); 
});

image_id - это идентификатор элемента изображения, на который вы щелкаете, а youtube - это класс фрейма, который есть в вашей вставке.