JSFiddle - React, Tailwind, and code Playground

by alan_omar

HTML

<div class="fullscreen-element">
		<button class="make-fullscreen">Fullscreen</button>
	</div>
	<div class="other-element">
		other element
	</div>

CSS

body {
  background: orange;
}

.fullscreen-element {
  width: 400px;
  height: 400px;
  background: red;
}

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  z-index: 999999999999;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}

JavaScript

(() => {
  const btn = document.querySelector(".make-fullscreen");
  const element = document.querySelector(".fullscreen-element");
  const other = document.querySelector(".other-element");

  element.addEventListener("fullscreenchange", event => {
    if (document.fullscreenElement) {
      element.appendChild(other);
    } else {
      element.parentNode.insertBefore(other,element.nextSibling)
    }
  });

  btn.addEventListener("click", () => {
    if (element.requestFullscreen) {
      element.requestFullscreen().catch(err => {
        console.log(err);
      });
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else {
      return;
    }
  });
})();