HTML Video element, not working after iosSafari15 update

try playsinline attribute on video element. it worked for me on safari v15.4

I figured it out, you need to have all three of these elements on a video: playsinline, autoPlay and muted. Otherwise, your auto-play won't work. You can still call video.play() after the user interacted with the site, if the autoplay is declared on the video element.

This issue started to occur with ios 15 and still I see no prospect of a solution from apple or anyone. It's so frustrating.

Android VS IOS: Android wins on this case. Very disappointed with Apple.

5 years in front-end developer, iOS is 90% of the bugs I encounter, and it's at least 2 years behind in major feature release (some may never see the light of day, like smooth-scroll behavior). Today I noticed I can't lazyload a video using a template tag for iOS 14 and under (autoplay won't work then - and iOS 14 is still used a lot). So I removed the template tag, but now the video first frame don't display well (white flickering while the video auto resize itself). I tried a lot of things, including some random tricks that did dome things (like the background:white, but I'm not there yet). It's in a standard horizontal media gallery, nothing fancy...

Glitches like that happen to me every other day, some of them you won't even believe how ridiculous and impossible they seem (acutally you might aha). So much frustration with this system, a real pain! Surely not what Steve jobs must have envisioned!

As suggested in the link below, the inclusion of the parameter "playsinline" in the tag, solved the problem: <video src="" autoplay muted playsinline>

https://stackoverflow.com/a/51432655

For me, it works when I used the attribute src inside the video tag, see below:

This does NOT work:

<video autoplay muted playsinline width="250" >
   <source src="something"
      type="video/mp4">
</video>

This works:

<video autoplay muted playsinline width="250"  src="something" type="video/mp4""></video>

This hasn't been resolved, is also reproducible in chrome on android through webview, and none of the fixes here are definite.

For me, video (mp4) defined as background image worked. Something like this:

<div style="background-image: url(path/to/mp4);">Make sure div has a height</div>

I've found a way (by a lot of trial and error!) to get a video to resize responsively in Safari (iOS16.3.1 and Mac OS Monterey 12.6.3)

Here's the HTML:

<video controls="true"; width="100%"; playsinline="true"; src="***.mp4"; type="video/mp4">

(The video tag is inside p tags but that doesn't render in this forum)

and here's the CSS:

video { height: auto; width: 100%; }

Also it still works in Chrome.

add poster attribute and add any random poster