title: preload youtube video iframe for smoother jquery animation?
body: <p>I have a number of links to youtube video iframes which appear in a popup window using jQuery slideDown by passing the Youtube href as shown below. Works fine, but the effect is jarring because the Youtube img doesn't 'respect' the jQuery slideDown and display smoothly. Eg.</p>
  
  <p><a href="http://jchmusic.com/videos" rel="nofollow">http://jchmusic.com/videos</a></p>
  
  <p>...just click on any of the 4 img links.</p>
  
  <p>Is there a way to somehow 'preload' the content of the Youtube iFrame (or other technique) so that the slideDown illusion is better? (BTW: I already tried appending separate nodes rather than all one big string as below and it had no effect.)</p>
  
  <pre><code>jQuery('ul.slideshow a').click(function(e) {
      e.preventDefault();          
      var pNum = jQuery(this).attr('href');
      jQuery('#modalpopup #inside').empty();          
      jQuery('#modalpopup #inside').append('&lt;iframe width="420" height="315" src="http://www.youtube.com/embed/' + pNum + '" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
      iH = jQuery(document).height();
  jQuery('#overlay').height(iH - 112).fadeTo( 'slow', .2 );
      jQuery('#modalpopup').slideDown(1000);
  });
  </code></pre>
  
  <p>TIA,</p>
  
  <p>---JC</p>