title: HTML5 - iOS 11+ hide video controlls
body: <p>I am trying to remove "play" button from video. Below is my code:</p>
  
  <pre><code>&lt;video class="video" autoplay muted loop playsinline poster="video.gif"&gt;
     &lt;source src="video.mp4" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>As attribute "controls" is boolean I don't see them on Chrome, Firefox, IE and Android browsers - so it's ok.
  But they still appeared on Safari. This piece of code removed "play" button on iOS 9.4.</p>
  
  <pre><code>.video::-webkit-media-controls-panel {
      display: none!important;
      -webkit-appearance: none;
  }
  
  .video::--webkit-media-controls-play-button {
      display: none!important;
      -webkit-appearance: none;
  }
  
  .video::-webkit-media-controls-start-playback-button {
      display: none!important;
      -webkit-appearance: none;
  }
  </code></pre>
  
  <p>But it still appears on iOS 11.2. </p>
  
  <p>Do you have any idea how to get rid of it?</p>