HTML <video> tag doesn't autoplay video on mobile IOS

Question

I have a problem with the video tag which needs to autoplay video on page load (I'm using it as a home page banner), but the video isn't displaying at all on IOS mobile. I've tested all desktop browsers and Android mobile versions and the issue only occurs on IOS mobile.

I have the following video tag in my React home page component:

<main className={styles["main"]}>
        <video
          autoPlay={true}
          muted={true}
          loop={true}
          playsInline={true}
          className={styles["main-video"]}
        >
          <source src="path-to-my-video.webm" type="video/webm" />
        </video>
</main>

And SCSS styling:

.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 15em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-position: center;
  &-video {
    z-index: 0;
    background-size: cover;
    position: absolute;
    top: 0px;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

Answer 1

Starting from iOS 10, Apple made changes to the autoplay policy in Safari for iOS to prevent videos from automatically playing with sound on web pages. The autoplay behavior for videos is controlled by the operating system, and it restricts videos from automatically playing on iOS devices, including iPhones and iPads.

To enable autoplay on mobile iOS devices, you can use the playsinline attribute along with the muted attribute on the <video> tag. Here's an example:

<video autoplay muted playsinline>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

By including the `playsinline` attribute, the video will play within the same context as the webpage rather than entering fullscreen mode. The `muted` attribute ensures that the video plays without sound, as sound autoplay is still restricted on iOS.

Please note that even with the playsinline and muted attributes, autoplay may not work in all cases, as it ultimately depends on the specific iOS version, browser, and user settings. It's always a good practice to provide a play button or another user-initiated action to start the video playback to ensure a consistent experience across different devices and platforms.