CODEWITHSUNDEEP
htmlcsshtml5-video
Lynn
Lynn

Reputation: 121

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?

Upvotes: 1

Views: 655

Answers (2)

Mohammed Anes Saadi
Mohammed Anes Saadi

Reputation: 1

iOS Safari requires the playsinline attribute for videos to play inline (especially for muted, autoplay videos).

Upvotes: 0

Raul
Raul

Reputation: 1024

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.

Upvotes: 1

Related Questions