JSFiddle - React, Tailwind, and code Playground

by abolyc

HTML

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<div id="container">
  <iframe src="http://korpanmarina.ru/personal/korpanetik360/fullscreenplayer2.php"></iframe>
  <div>
    <button class="button dh" id="watchButton">Click me to fullscreen the iframe</button>
  </div>
  <div class="info">You can check keydown event listener when the browser are in fullscreen and press F11 and ESC by console log on developer tools</div
  <div class="error"></div>
</div>

JavaScript

$(function () {
    var that = this;
    
    document.getElementById("watchButton").addEventListener("click", function () {
        $(this).fadeOut().fadeIn().fadeOut().fadeIn();
        that._handleWatch.apply(that, arguments);
    }, false);
    
    document.getElementById("refreshButton").addEventListener("click", function () {
        $(this).fadeOut().fadeIn().fadeOut().fadeIn();
        that._handleRefresh.apply(that, arguments);
    }, false);

    $('#watchButton').click();
});

var button = document.querySelector('#container .button');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener. 
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
  console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);

function fullscreen() {
  // check if fullscreen mode is available
  if (document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled) {
    
    // which element will be fullscreen
    var iframe = document.querySelector('#container iframe');
    // Do fullscreen
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    } else if (iframe.webkitRequestFullscreen) {
      iframe.webkitRequestFullscreen();
    } else if (iframe.mozRequestFullScreen) {
      iframe.mozRequestFullScreen();
    } else if (iframe.msRequestFullscreen) {
      iframe.msRequestFullscreen();
    }
  }
  else {
    document.querySelector('.error').innerHTML = 'Your browser is not supported';
  }
}

function fullscreenChange() {
  if (document.fullscreenEnabled ||
      ...