0

I have a page with an iframe (which includes a SCORM module). On that page I added a button to display the iframe full-screen, using the javascript code below. The button disappears when you enter full screen.

<button id="fullscreen">
    Button
</button>

<script type="text/javascript">
  document.getElementById("fullscreen").addEventListener("click", function () {
      if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen();
      }
  });

  document.addEventListener("fullscreenchange", function (event) {
        displayButton();
  });

  function displayButton() {
      if (document.fullscreenElement) {
          document.getElementById("fullscreen").style.display="none";
      } else {
          document.getElementById("fullscreen").style.display="block";
      }
  }
</script>

The problem is that in a specific scenario the button does not re-appear as you close full-screen. This scenario is as follows: the iframe also contains embedded Vimeo videos.

  1. You hit the full-screen button. You then get the iframe full screen and the button is hidden.
  2. While in full screen mode, you hit the full screen button of the embedded Vimeo movie. You then get just the Vimeo movie full screen.
  3. While having the Vimeo movie full screen, you hit Escape or F11 (Windows pc) to exit full screen. It then exits full screen. The problem: but the button does not re-appear. (The button does re-appear if you exit full screen after step 1.)

How can I change the code to display the button again when exiting full screen, also when exiting full screen from the Vimeo movie?

Marty
  • 2,132
  • 4
  • 21
  • 47
  • https://stackoverflow.com/questions/21765389/html5-fullscreen-event-listener – RST Jun 10 '20 at 12:24
  • If you want to add it as the answer, I'll accept it. To make it work, I needed to replace the event listener to: `["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "msfullscreenchange"].forEach( eventType => document.addEventListener(eventType, displayButton, false) );` – Marty Jun 10 '20 at 16:09
  • That is what I thought. Glad you could make it work. It is not really my answer, I just found the post using Google. Thanks though. – RST Jun 10 '20 at 17:01

0 Answers0