Versteckter Youtube-Player verliert seine Methoden

Question

Ich kontrolliere einen eingebetteten Youtube-Chromeless-Player mit Javascript, und ich möchte es gelegentlich ausblenden, indem ich display: none. Wenn ich den Player jedoch erneut zeige, verliert er seine Youtube-Methoden.

Zum Beispiel:

<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> 

hidePlayer von Showplayer gefolgt Aufruf gibt diesen Fehler auf dem playvideo Aufruf:

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

Die einzige Lösung, die ich finden kann, ist die Sichtbarkeit zu verwenden: versteckt, aber das ist Unsinn mit meinem Seitenlayout. Irgendwelche anderen Lösungen da draußen?

Answer 1

Ich hatte dies auch in meinem Userscript passiert. Sie können versuchen, es einfach 1x1 px zu machen, anstatt es ganz zu verstecken.

Es ist ein ziemlich nerviges Problem, und macht keinen Sinn, warum das passiert.

Answer 2

Beide anzeigen: keine und Sichtbarkeit: hidden wird den Player neu laden, aber Sie können dies über CSS lösen, indem Sie den Video Player in ein div mit Überlauf: versteckt.

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