title: switch the url for an iframe to a new one when you click a thumbnail
body: <p>I am trying to update the src="" of an iframe when I click through the thumbnails. This is what I have so far. </p>
  
  <p>html </p>
  
  <pre><code>&lt;div class="videoPopup"&gt;&lt;span class="close"&gt;X close&lt;/span&gt;
      &lt;iframe width="600" height="400" src="" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div class="vidTrigger"&gt;&lt;/div&gt;
  &lt;div class="vidTrigger"&gt;&lt;/div&gt;
  &lt;div class="vidTrigger"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery </p>
  
  <pre><code>var youtubevidId = ['SzsDHtzx6tI', 'BOQvtdXRtKw', 'gmIJoQV96PM'];
  
  for (var i = 0; i &lt;= youtubevidId.length; i++) {
      var iframeEmbed = ('http://www.youtube.com/embed/youtubevidId?enablejsapi=1&amp;wmode=opaque');
  }
  $('.vidTrigger').click(function () {
      $('.videoPopup').show();
      $(iframe).attr(src, iframeEmbed);
  });
  
  $('.close').click(function(){
      $('.videoPopup').hide();
  });
  </code></pre>
  
  <p>I could probably have done something like this 
  <a href="https://stackoverflow.com/questions/1554396/change-content-in-iframe-with-jquery">How do I dynamically change the content in an iframe using jquery?</a></p>
  
  <p>but I am trying to make the array items look little nicer. The string is a bit long. The only thing that changes in that is the youtube video id. So I thought I will take this route</p>
  
  <p>Here is my fiddle</p>
  
  <p><a href="http://jsfiddle.net/sghoush1/mZh3c/3/" rel="nofollow noreferrer">http://jsfiddle.net/sghoush1/mZh3c/3/</a></p>
  
  <p>For me the js fiddle is acting a bit weird today. If it keeps on loading and nothing shows up just stop the pge from loading it will be there. Weird but its happening for me</p>
  
  <p>Another major bug is it has to work on jquery 1.3.2 :-(. Which totally sucks</p>