title: HTML5 Video autoplay on iPhone
body: <p>I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted&gt;&lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the <a href="https://webkit.org/blog/6784/new-video-policies-for-ios/" rel="noreferrer" title="New &lt;video&gt; Policies for iOS">New  Policies for iOS</a> and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:</p>
  
  <ul>
  <li>Removing overlaying divs won't fix it </li>
  <li>Removing z-index won't fix it</li>
  <li>Wifi or Cellular doesn't make a difference </li>
  <li>Video filesize doesn't make a difference, too</li>
  </ul>
  
  <p>Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9</p>