[SOLVED] Html video does not load on phone

Html video does not load on phone

There is a video on my HTML page that works perfectly fine on desktop browsers, however, when I access it on my mobile phone which is an iPhone 11 Pro, the video does not load at all on chrome and Safari. Here is the website hosted by netlify, from my GitHub.

https://admiring-khorana-ad08d5.netlify.app/

The Html

    <div id="principalvideo" class="video-container">
      <video autoplay muted loop id="myMainVideo">
        <source src="main.mp4" type="video/mp4">
      </video>
    </div>

The css

  .video-container {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

Am I missing anything?

Solution

Consider reducing the video size. It has 70MB and it loads eventually when I did my testing but it seemed to take forever. I tested on latest OS on iPad and iPhone. Stay around 10 MB with your videos.