title: How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?
body: <p>The HTML5 <code>&lt;video&gt;</code> tag offers the user a button to toggle on and off the fullscreen mode on Safari for mobile devices (iOS).</p>
  
  <p>I would like to capture and handle this user action but it doesn't seem to raise an event when the button is pressed and the player enters the full screen mode.</p>
  
  <p>Here is the link to the Safari API for the HTMLVideoElement class:</p>
  
  <p><a href="https://developer.apple.com/documentation/webkitjs/htmlvideoelement" rel="nofollow noreferrer">https://developer.apple.com/documentation/webkitjs/htmlvideoelement</a></p>
  
  <p>We can easily find out when the video is paused of played in Javascript, like this:</p>
  
  <pre><code>function onload()
  {
    var player = document.getElementsByTagName("video")[0];
    player.addEventListener('play',videoPlayHandler,false);
    player.addEventListener('pause',videoPauseHandler,false);
  }
  </code></pre>
  
  <p>However they don't seem to have any events for when the video enters the full screen mode.</p>
  
  <p>We can force the video into fullscreen mode in response to user action by calling the <em>webkitEnterFullscreen()</em>, but that doesn't help me.  I need to know when the user taps on the fullscreen button.</p>
  
  <p>Hiding the controls and replacing them by my own custom controls sounds like a really long winded solution.</p>
  
  <p>Another option I can think of is to set a timing event, constantly checking for the <em>webkitDisplayingFullscreen</em> property, but that feels like a bad thing to do in terms of memory management.</p>
  
  <p>Can anyone suggest a better solution?</p>