My site works smooth on every browser but it doesn't work at all on Safari

Question

<div class="container">
  <div id="video--rotated">
    <div class="video">
      <video preload="metadata" autoplay="autoplay" loop="loop" muted="" width="100%" height="auto"><source src="media/general/landing.mp4" type="video/mp4" /></video>
    </div>
  </div>

The title pretty much says it all. My website is unusable on all Apple devices, even after I installed Chrome on my iPad it takes 20-30 seconds to load, on Windows Chrome it doesn't take a second.

The web is a pretty basic portfolio when I remove the video from the landing page it works fine on all devices. How do I fix this issue?