Question 179193 in Html Question posted in
Some basic documentation can be found here.

Why doesn’t the HTML tag autoplay video on mobile IOS?

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);
  }
}
Tags:

2

Answers


  1. 0

    It could be related to the autoplay policy enforced by Safari. Add the playsInline attribute to your video tag, also currently, you’re using the video/webm format, which is not supported by iOS. You should provide a fallback source in a different format that iOS can play such as mp4.

    You can try this:

    <main className={styles["main"]}>
  <video
    autoPlay
    muted
    loop
    playsInline
    className={styles["main-video"]}
  >
    <source src="path-to-my-video.mp4" type="video/mp4" />
    <source src="path-to-my-video.webm" type="video/webm" />
    {/* Add additional fallback formats if necessary */}
  </video>
</main>

    Make sure to replace "path-to-my-video.mp4" with the actual path to your video file in MP4 format. By including both MP4 and WebM formats, you cover a wider range of browser support. Also, double-check that the video file exists at the specified path and is accessible.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search