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 i

Solution 1:

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.

Solution 2:

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