title: Trying to switch URL of iframe YouTube video on click with jQuery
body: <p>I have two divs. One contains a YouTube iframe video and the other contains a YouTube thumbnail. When the button is pressed, these are the intended steps:</p>
  
  <p>-retrieve URL of the thumbnail</p>
  
  <p>-replace URL of the iframe video with the URL of the YouTube video the thumbnail is from.</p>
  
  <p>Here is the JSFiddle. It seems like it should work, but when I click the button I'm only getting a black screen. Can anyone offer advice? <a href="http://jsfiddle.net/jw1sw01v/1/" rel="nofollow">http://jsfiddle.net/jw1sw01v/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="stage"&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/e-ORhEE9VVg" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  
  &lt;div class="slideYThumbnail"&gt;
          &lt;img class="slideYThumbnailInside" src="http://img.youtube.com/vi/kt0g4dWxEBo/0.jpg"&gt;
          &lt;/img&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).on('click', '.slideYThumbnail', function(event) {
          var change = $(this).find("img").attr("src").split("/");
          alert(change[4]);
          $("#stage &gt; iframe").attr("src", "https://www.youtube.com/embed/' + change[4] + '"); 
  });   
  </code></pre>