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();
}