title: Using "Gifs" in Safari and IOS: Videos won't autoplay
body: <p>Instead of using true gifs, we are using mp4 videos that loop (in order to save load time)</p>
  
  <p>However, Safari is refusing to autoplay the videos, even with <code>autoplay loop muted playsinline</code>.</p>
  
  <p>Is there a way to create looping videos/gifs that do not require large file sizes and can autoplay in mobile</p>
  
  <p>My video tags look like:</p>
  
  <pre><code>&lt;video preload autoplay="autoplay" muted="true" playsinline="true" loop&gt;
              &lt;source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'&gt;
                  Your browser does not support video tag
  &lt;/video&gt;
  </code></pre>
  
  <p>Have also tried:</p>
  
  <pre><code> &lt;video preload autoplay muted playsinline loop&gt;
                  &lt;source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'&gt;
                      Your browser does not support video tag
      &lt;/video&gt;
  </code></pre>
  
  <p>In some cases I want the gif to start when a user scrolls to a specific point. So I use:</p>
  
  <pre><code>if (/* user scrolls to div */){
     document.getElementById('my-video').play();
  }
  </code></pre>
  
  <p>Is there a way to have videos autoplay in Safari, or any best practice alternatives?</p>