Hidden youtube player loses its methods

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.

For example:

<script>
  swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&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();
  }
</script>
<a href="#" onClick="hidePlayer();">hide</a>
<a href="#" onClick="showPlayer();">show</a>
<div id="player"></div>

Calling hidePlayer followed by showPlayer gives this 开发者_JS百科error on the playVideo call:

Uncaught TypeError: Object #<an HTMLObjectElement> has no method 'playVideo'

The only solution I can find is to use visibility: hidden, but that is messing with my page layout. Any other solutions out there?

---

I've had this happen to me as well in my userscript. You can try just making it 1x1 px, instead of hiding it altogether.

It's a pretty annoying issue, and makes no sense as to why this happens.

---

Both display: none and visibility: hidden will reload the player, but you can solve this via CSS by wrapping the video player in a div with overflow: hidden.

HTML:

<div id="ytwrapper">
    <div id="ytplayer">
    </div>
</div>

CSS:

#ytwrapper { overflow: hidden; }

JS:

function hidePlayer() {
    player.pauseVideo();
    player.style.marginLeft = "50000px";
}

function showPlayer() {
    player.style.marginLeft = "0px";
    player.playVideo();
}