Кнопка закрытия в полноэкранном режиме html5

Question

У меня есть сайт онлайн-игр, и когда человек нажимает кнопку «go fullscren», игра начинает работать в полноэкранном режиме.

Мой код:

 Game:
 <iframe  id="videoElement"  seamless="seamless" id="iframegame" scrolling="no" frameborder="0" height="433" width="770.4132075471698" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" webkit-playsinline="true" src="//html5.GameDistribution.com/ed10c5476d9c405191a6269d648f895e/?gp=1?gp=1&amp;siteid=158&amp;channelid=1&amp;siteLocale=tr-TR&amp;spilStorageId=94208775588" style="width: 741px; height: 416.692px;"></iframe>

 Button Full Screen:   
<button id="goFS">Go Fullscreen</button>
    <script>
      var goFS = document.getElementById("goFS");
      goFS.addEventListener("click", function() {
          var videoElement = document.getElementById("videoElement");
          videoElement.requestFullscreen();
      }, false);
    </script>

Примерно так:

Когда человек нажимает, игра в полноэкранном режиме:

Однако, как мне добавить «кнопку закрытия», чтобы игра возвращается к нормальному размеру, когда на полном экране?

что-то вроде этого (обратите внимание на красную кнопку в правом верхнем углу экрана):

Answer 1

Чтобы кнопка отображалась только в полноэкранном режиме, используйте код ниже:

if(window.fullScreen){
// show button
}

Проверьте метод js exitFullscreen (), чтобы закрыть полноэкранный режим:

https://www.w3schools.com/jsref/met_element_exitfullscreen.asp

Answer 2

Используйте document.exitFullscreen для выхода из полноэкранного режима:

Добавьте событие нажатия на кнопку закрытия:

closeButton.onclick = function (event) { 
    document.exitFullscreen() 
};