title: Issue with custom controls in fullscreen (chrome mobile)
body: <p>I'm trying to make custom controls. I've hidden the original with</p>
  
  <pre><code>video::-webkit-media-controls {
    display:none !important;
  }
  </code></pre>
  
  <p>This is the HTML of video block</p>
  
  <pre><code>&lt;div id="video-container"&gt;
    &lt;video width="400px" src="#" id="video"&gt;&lt;/video&gt;
  
    &lt;div id="controls"&gt;
      &lt;div class="switch" id="play"&gt;&lt;/div&gt;
      &lt;div id="progress"&gt;
        &lt;div id="progress-bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="fullscreen"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS of controls</p>
  
  <pre><code>#controls {
    z-index: 2147483647;
    position: absolute;
    width: 100%;
    background: silver;
    display: flex;
    bottom: 0;
    left: 0;
  }
  </code></pre>
  
  <p>This is toggleFullscreen function in JS</p>
  
  <pre><code>if((document.fullScreenElement &amp;&amp; document.fullScreenElement !== null) ||
  (!document.mozFullScreen &amp;&amp; !document.webkitIsFullScreen)) {
      if (video.requestFullscreen) {
          video.requestFullscreen();
      }
      else if (video.mozRequestFullScreen) {
          container.mozRequestFullScreen(); // Firefox
      }
      else if (video.webkitRequestFullscreen) {
          video.webkitRequestFullscreen(); // Chrome and Safari
      }
  }
  else{
      if(document.cancelFullScreen) {
          document.cancelFullScreen();
      }
      else if(document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
      }
      else if(document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
      }
  }
  </code></pre>
  
  <p>So, when I open desktop Chrome it's working fine. Going fullscreen, it's OK. I press f12, "toggle device toolbar", choose any phone, go fullscreen, it's there. I turn landscape mode, nothing bad there.<br/>
  Then I open it on my phone. I see it. I go fullscreen, Aaaand I see it. "But what's the problem?" Will you ask?
  You see, <code>src="#"</code>? With my js I change it <code>$video.attr("src", dir);</code>
  Now it's gone. No controls in fullscreen. While the original controls will be seen, if I enable.</p>