title: Hidden youtube player loses its methods
body: <p>I'm controlling a embedded youtube chromeless player with javascript, and I want to hide it occasionally by setting display: none. However, when I show the player again, it loses its youtube methods.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;script&gt;
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&amp;playerapiid=player",
      "player", "425", "356", "8", null, null, 
      {allowScriptAccess: "always"}, {id: 'player'}
    );
  
    var player = null;
  
    function onYouTubePlayerReady(playerId) {
      player = document.getElementById(playerId);
      player.addEventListener('onStateChange', 'playerStateChanged');
    }
  
    function hidePlayer() {
      player.pauseVideo();
      player.style.display = 'none';
    }
    function showPlayer() {
      player.style.display = 'block';
      player.playVideo();
    }
  &lt;/script&gt;
  &lt;a href="#" onClick="hidePlayer();"&gt;hide&lt;/a&gt;
  &lt;a href="#" onClick="showPlayer();"&gt;show&lt;/a&gt;
  &lt;div id="player"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Calling hidePlayer followed by showPlayer gives this error on the playVideo call:</p>
  
  <pre><code>Uncaught TypeError: Object #&lt;an HTMLObjectElement&gt; has no method 'playVideo'
  </code></pre>
  
  <p>The only solution I can find is to use visibility: hidden, but that is messing with my page layout. Any other solutions out there?</p>