title: How to hide html5 video controls on iOS 12
body: <p>HTML5 video player has been showing controls only in <strong>iOS</strong> <code>12.x.x</code> even when the controls are set to <code>false</code> in <code>video</code> tag but all other browsers are working fine and don't show the controls.</p>
  
  <p>The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>&lt;video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true"&gt;
    // sources here
  &lt;/video&gt;
  </code></pre>
  
  <p>I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).</p>
  
  <p><a href="https://i.stack.imgur.com/TkiKN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TkiKN.png" alt="**enter image description here**"></a></p>