Javascript/jQuery - замените видеофрагмент с изображением заполнителя

Question

У меня был один вопрос, связанный с этим фрагментом кода, на который отвечали очень полезные люди, но теперь у меня есть другой, который немного отличается. У меня есть изображение-заполнитель, который сидит в карусельном слайде, который при нажатии на него заменяется видео с YouTube, используя встроенный iframe iframe по умолчанию.

Что бы я хотел сделать, после того, как пользователь нажал на изображение и сыграл видео, когда они нажимают на карусельный слайд, в которое встроено видео (например, нажав на стрелку карусели или pagination dot), он сбрасывает его обратно до того, как это было до отображения видео.

Надеюсь, это имеет смысл. В принципе, мне нужна помощь в обратном конструировании этого кода, чтобы видео снова было заменено его образ-заполнителем одним щелчком другого элемента/div.

Вот HTML:

<div class="youtube_video"> 
<img src="img/video_poster_carousel.jpg" width="986" height="308"> 
<!-- <iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" frameborder="0" allowfullscreen></iframe> --> 
</div> 

И CSS:

/* video */ 
.youtube_video { position: relative; padding-bottom: 31.65%; height:0; } 
.youtube_video img { position: absolute; display: block; top: 0; left: 0; /*width: 100%; height: 100%;*/ z-index: 20; cursor: pointer; } 
.youtube_video:after { content: ""; position: absolute; display: block; 
    background: url(play-button.png) no-repeat 0 0; 
    top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; } 
.youtube_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

/* image poster clicked, player class added using js */ 
.youtube_video.player img { display: none; } 
.youtube_video.player:after { display: none; } 

И Javascript:

$(function() { 
    var videos = $(".youtube_video"); 

     videos.on("click", function(){ 
      var elm = $(this), 
       conts = elm.contents(), 
       le  = conts.length, 
       ifr  = null; 

      for(var i = 0; i<le; i++){ 
       if(conts[i].nodeType == 8) ifr = conts[i].textContent; 
      } 

      elm.addClass("player").html(ifr); 
      elm.off("click"); 
     }); 
    }); 

Answer 1

Это ниже линии на самом деле делает innerHTML, который означает, что ваш IMG тег потеряно вам, возможно, придется перенести тэг IMG из youtube_video er и сделать механизм переключения скрыть и показать для контейнера youtube_video и тега IMG

elm.addClass("player").html(ifr);