JavaScript Closing fullscreen for getElementById(id)

[112]

Hello, im new in js so please dont be hard on me. Spend more that 5 hours and still no clue.

So issue is that script goes fullscreen as expected but cannot figure out how to trigger "ESC" or same button to close fullscreen.

.holds-the-iframe just adds loader before iframe is loaded.

<div class="holds-the-iframe"><iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/">
</iframe></div>

<button onclick="makeFullscreen('game');">[ ]</button>

function makeFullscreen(id){
        var el = document.getElementById(id);
        el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
  }

 

[OldMan]

First do not use inline styling, make two classes and set the style for normal in one and full screen in the other.
Your button is OK, you don't need to send anything to the function.
Your CSS:
.fullScreen{