HTML5 Video autoplay on iPhone

autoplay, html, ios, video, webkit

Solution

Does `playsinline` attribute help?

Here's what I have:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

See the comment on `playsinline` here: https://webkit.org/blog/6784/new-video-policies-for-ios/

Problem

I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one: ``` <video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video> ``` This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing: - Removing overlaying divs won't fix it - Removing z-index won't fix it - Wifi or Cellular doesn't make a difference - Video filesize doesn't make a difference, too Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9

Original source

Related problems