JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>fullscreen test</title>
  </head>

  <body>
    <button id="button">Open Fullscreen</button>
    <iframe scrolling="no" allow="fullscreen" src="https://html5.ozguruygulama.com/tmp/" id="redfoc"></iframe>
  </body>

</html>

CSS

body {
  background-color: #eee;
}


iframe {
  width: 100%;
  height: 100%;

}

JavaScript

var elem = document.getElementById("redfoc");
var btn = document.getElementById("button");
btn.addEventListener("click", function() {
  openFullscreen();
});

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    /* IE/Edge */
    elem.msRequestFullscreen();
  }
}