Ocultar div quando outra está sendo mostrada

[Xilinglin 0]

Olá, esse é o meu primeiro tópico aqui, então me desculpem se eu escreve algo errado, também não sou muito boa com css/html essas coisas, tudo que eu sei eu aprendi pesquisando, então vamos lá:

Eu tenho um blog de vídeos de desenhos, então nos vídeos eu quero adicionar mais de uma opção de player, como nesse site aqui: http://animeai.xpg.uol.com.br/552316.html

Eu quero assim: Quando uma pessoa clicar em uma imagem ou palavra "Player 1", apareça um vídeo e se eu clicar no player 2 o player 1 vai sumir, então aparece um outro vídeo no mesmo lugar do player 1 (Não consegui explicar de outra forma)

O máximo que eu consegui foi isso:

<style type="text/css">
.escondida {
    display:none;
}
</style>

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("central");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten[i].onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

<br />
<div id="central">
<input id="receita1" type="button" value="Player 1" />
    <input id="receita2" type="button" value="Player 2" />
    <input id="receita3" type="button" value="Player 3" />
    <input id="receita4" type="button" value="Player 4" />
    <br />
<div class="escondida" id="1">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
<div class="escondida" id="2">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
<div class="escondida" id="3">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
<div class="escondida" id="4">
<iframe height="474" src="https://drive.google.com/file/d/0B8Bn-5dv4WO-N3FZSEFwbERMakE/preview" width="811"></iframe></div>
</script>
</div>