So I'm trying to learn some HTML5 stuff for making my own website from scratch. One thing I wanted to try was putting twitch chat and player in the web page. Iwant it to start the page with the player absent and the buttons available to be used to turn the player + chat on or off. Been trying to wrap my head around this and I can't find the solution I'm looking for. Would appreciate any tips or hints on how to do it, thanks!

<a href=" javascript:player()">Display/Hide Player</a>
<a href=" javascript:chat()">Display/Hide Chat</a>

<script>

var playeron = false;
function player()
{
    if(playeron==false)
    {
        playeron=true;
        document.getElementById("MyPlayer").style.display="block";
    }
    else
    {
        playeron=false;
        document.getElementById("MyPlayer").style.display="none";
    }
}

var chaton=false;
function chat()
{
    if(chaton==false)
    {
        chaton=true;
        document.getElementById("MyChat").style.display="block";
    }
    else
    {
        chaton=false;
        document.getElementById("MyChat").style.display="none";
    }
}
</script>

<iframe id = "MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720"></iframe>

<iframe id = "MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720"></iframe>

<script>
var playeron=false;
var chaton=false;
function player(){
if(playeron==false){
playeron=true;
document.getElementById("MyPlayer").style.display="block";
}else{
playeron=false;
document.getElementById("MyPlayer").style.display="none";
}
}
//try it yourself for chat
</script>

<a href=" javascript:player()">Display/Hide player</a>
<a href=" javascript:chat()">Display/Hide Chat</a>
<style>
iframe{
display:none;
}
</style>