title: The Youtube video in my hidden DIV only starts to load after the DIV is shown
body: <p>I have a Youtube clip in a hidden DIV on my page.</p>
  
  <p>After the page has loaded I wanted the video to load quietly in the background so that when the user clicks the button to "un-hide" the DIV, the video will be ready to go.</p>
  
  <p>But the way I have it now, the video starts to load only after the user clicks the button.</p>
  
  <p>Is there a change I could make here to have the video loaded in the background and then just hide or show it based on the button click?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
      $(document).ready(function()
      {
        $("#show_video").click(function(){
            $("#hello").show();  
        });
      });
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;button id="show_video"&gt;Show The Video&lt;/button&gt;
  &lt;div id="hello" style="display:none;"&gt;
  &lt;object width="630" height="380"&gt;&lt;param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;amp;ap=%2526fmt%3D22" name="movie"&gt;&lt;param value="window" name="wmode"&gt;&lt;param value="true" name="allowFullScreen"&gt;&lt;embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;amp;ap=%2526fmt%3D22"&gt;&lt;/object&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>