title: Video tag not working on iPhone Safari or Chrome and certain iPads
body: <p>I'm at the end of my rope with a certain issue of my videos not playing on my iPhone 6 browsers (Safari and Chrome) and certain ipads. It works great on desktop browsers, Android Chrome and even my iPad mini in Safari. I've researched this for a while now, including Stack Overflow but everything I've tried still doesn't play the video on my iPhone (only shows the initial frame image). Here is my video test page where I'm making edits, my code below and what I've tried to fix it based on research:</p>
  
  <pre><code>&lt;section id="video-wrap"&gt;   
      &lt;video class="video &lt;?php the_field('header_video_class'); ?&gt;" autoplay muted loop&gt;
        &lt;source src="/video/&lt;?php the_field('header_video'); ?&gt;.mp4" type="video/mp4"&gt;
        &lt;source src="/video/&lt;?php the_field('header_video'); ?&gt;.ogg" type="video/ogg"&gt;
        &lt;source src="/video/&lt;?php the_field('header_video'); ?&gt;.webm" type="video/webm"&gt;
      &lt;/video&gt;&lt;!-- /video --&gt;
      &lt;div id="video-wrapper"&gt;
          &lt;div class="video-caption"&gt;
              &lt;?php the_title(); ?&gt;
          &lt;/div&gt;&lt;!-- /content --&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <ul>
  <li>I've tried adding the controls parameter back in, no luck</li>
  <li>I've tried adding the video source within the video tag and removing the additional source tags, no luck</li>
  <li>I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.</li>
  <li>I've tried removing the video caption overlay in case that was conflicting. No luck.</li>
  </ul>
  
  <p>WHAT AM I MISSING? Thanks in advance for any help! </p>