title: how to hide html video controls in micorostf edge (fullscreen mode)
body: <p>I'm writing an angular directive for a video player. 
  I'd like to have custom controls that should override the native one. <br>
  In normal mode all works fine while in fullscreen mode no. </p>
  
  <p>Actually the problems occurs in IE11 and Microsoft Edge.</p>
  
  <ul>
  <li>In IE11: both the native bar (ok) and the custom one (ko) are<br>
  hidden. I can't show my bar. </li>
  <li>In Edge: I can't hide the native controls    bar and I can't show my
  bar</li>
  </ul>
  
  <p><br>To hide the bar I tried with</p>
  
  <pre><code>video::-webkit-media-controls {
    display:none !important;
  }
  
  video::-webkit-media-controls-enclosure {
    display:none !important;
  }
  </code></pre>
  
  <p>but seems that in microsoft browser doesn't work.</p>
  
  <p>I already read and follow this post about almost the same problem <a href="https://stackoverflow.com/questions/24318367/change-html5-video-controls-layout-when-fullscreen">change html5 video controls layout when fullscreen</a></p>
  
  <p>The problem has nothing to do with angular, but I can't figure out where put my hands to get things works: in the css or do I have to use javascript (how?) to handle the show/hide behaviour of the native control bar?</p>
  
  <p>This is a plunk <a href="http://plnkr.co/edit/zGlMN0Qys2yHdWgGXefk?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/zGlMN0Qys2yHdWgGXefk?p=preview</a> where you can find my javascript pure code. </p>
  
  <p>I really appreciate any help to get things work!</p>
  
  <p>Luca</p>