title: Javascript/jQuery - replace a video iframe with a placeholder image
body: <p>I've had one question involving this piece of code answered by the very helpful people here, but now I have another one which is slightly different. I have a placeholder image which sits in a carousel slide, which when clicked on gets replaced by a youtube video using the default youtube iframe embed. </p>
  
  <p>What I would like to do is, after a user has clicked on the image and has played the video, when they click away from the carousel slide the video is embedded in (for example, by clicking on a carousel arrow or pagination dot) it resets it back to how it was before the video was displayed.</p>
  
  <p>I hope that makes sense. Basically, I need help reverse engineering this code so that the video gets replaced again by it's placeholder image on a click of another element/div.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="youtube_video"&gt;
  &lt;img src="img/video_poster_carousel.jpg" width="986" height="308"&gt;
  &lt;!-- &lt;iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&amp;list=PL027E2B6D9900A88F&amp;showinfo=0&amp;controls=1" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt; --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>/* 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; }
  </code></pre>
  
  <p>And the Javascript:</p>
  
  <pre><code>  $(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&lt;le; i++){
                if(conts[i].nodeType == 8) ifr = conts[i].textContent;
              }
  
              elm.addClass("player").html(ifr);
              elm.off("click");
          });
    });
  </code></pre>