title: jQuery - On Click replace iFrame content with new content
body: <p>Trying to figure out the best way to do this. I have a main video player pulling in a video from Vimeo. Underneath this main player is thumbnails of other videos. When the user clicks on a thumbnail I want it to make that thumbnail video take the place of the main video.</p>
  
  <p>Vimeo embeds are all iFrame based. I'm not sure if I should be replacing the whole iFrame, or just the URL etc. Also the size difference between the main on and the thumbnail; not sure if that will get carried across automatically or the Vimeo code will be clever enough to resize. And can the Jquery click override the click the thumbnail usually expects to play the small video?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="blogPlayer"&gt;
      &lt;iframe src="#" width="528" height="297" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;ul class="blogThumbnails&gt;
      &lt;li&gt;&lt;iframe src="#" width="160" height="90" frameborder="0"&gt;&lt;/iframe&gt;&lt;/li&gt;
      &lt;li&gt;&lt;iframe src="#" width="160" height="90" frameborder="0"&gt;&lt;/iframe&gt;&lt;/li&gt;
      &lt;li&gt;&lt;iframe src="#" width="160" height="90" frameborder="0"&gt;&lt;/iframe&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This jQuery is completely untested and done on the spot, but was thinking something along the lines of...</p>
  
  <pre><code>$('.blogThumbnails li').click(function(){
     var video = $(this).html();
     $('.blogPlayer').replaceWith('video');
  })
  </code></pre>