title: HTML5 - Prevent Fullscreen Mode
body: <p>I'm using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API" rel="nofollow noreferrer">Fullscreen API</a> with an embedded YouTube video to detect whether or not the browser window has entered fullscreen mode. I have that working great.</p>
  
  <p>What I'd like to do is prevent from occurring the default behavior of entering fullscreen mode. I'd like to put in my own fullscreen mode logic so that I can overlay DOM elements on top of the YouTube Player. Currently, I can exit fullscreen mode immediately after entering it, but that results in a poor and confusing experience for the user.</p>
  
  <p>One workaround is to remove the fullscreen button using YouTube's Player API parameters and add my own button with my own logic, but this is not ideal because users can still double-click on the YouTube player to make it full screen.</p>
  
  <p>Here's my code for detecting the fullscreen state of the browser:</p>
  
  <pre><code>$(document).on("fullscreenchange webkitfullscreenchange msfullscreenchange mozfullscreenchange", function(event)
  {
      onFullScreenChange(event);
  });
  
  function onFullScreenChange(event)
  {
      var fullScreenElement =
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement;
  
      var isFullscreen = !!fullScreenElement;
  
      console.log("In fullscreen mode?", isFullscreen);
  
      if (isFullscreen === true)
      {
          // TODO: Prevent the browser from entering full screen mode. These three lines don't prevent that behavior
          event.stopImmediatePropagation();
          event.stopPropagation();
          event.preventDefault();
          return false;
  
          // The commented code below works. Ideally, we'd want to prevent the browser from even entering full screen mode 
          //document.webkitExitFullscreen();
      }
  }
  </code></pre>
  
  <p>Using <code>preventDefault()</code>, <code>stopPropagation()</code>, and <code>stopImmediatePropagation()</code> didn't work, so I'm stuck at this point. How can I prevent the browser from entering fullscreen mode, if indeed it is possible?</p>