HTML Video element, not working after iosSafari15 update

Same issue here. Any news?

Same here, seems like iOS 15 has broken the <video> element, except for me, it is also broken on Chrome on iOS.

Also some extra info, if you apply a background: white; style (or any non-transparent colour, or image) to the <video> element, it will then be able to render the first frame of the video instead of showing nothing. In some cases it will continue to render the following frames only when the user is dragging their finger on the video element. As soon as the page stops moving, the video will freeze again.

Definitely seems like an iOS 15 bug to me.

I have had a similar problem. I suggest you check your CSS, in my case, passing a video from fixed to absolute position has corrected the problem.

I'm also noticing this issue. Applying the background color can get the first frame of the video to show, but I can't influence the playing otherwise.

I am noticing the same behavior on Mac OS (desktop) Safari 15. I can get the first frame of the video to show up if a background color is set on the element.

The video will not autoplay (despite having the correct attributes), but I did notice an unusual behavior: I can "scrub" the video by resizing the viewport (either resizing the window or resizing the web inspector drawer).

Same Problem here. Seems other People have the same Problem:

https://stackoverflow.com/questions/69554317/safari-15-0-video-element-position-fixed-not-working-on-page-load

https://stackoverflow.com/questions/69264516/safari-ios-15-video-issue

The only fixes i found so far:

• add Position fixed via JS after Page load
• reassign the src of the video tag via JS after Page load

Both solutions feel very dirty/hacky.

Any News? Apple that can't be. All other modern Browsers don't have that problem...

Same issue here are well, but am curious if this bug is only on videos with transparent backgrounds? I have a few videos on my site, but only getting this bug on the one with the transparent background. Considering the above hack is to add a background color to the video element, I wonder if theres any relation there.

I have the same issue. I can't get the tag to work on Safari Desktop, despite having no issues with every other browser. Workarounds here shouldn't be necessary. Apple need to provide a solution. The Apple documentation says that the video html tags work in Safari.

Also experiencing this issue. Any word on when/if it will be fixed?

Same issue here.

The <video> poster attribute is not showing since iOS 15.

Other 'hacks' mentioned here with CSS are no good for HLS video sources to 'display the first frame' before requesting playback.

Wow Apple keeps disappointing with this browser - so many bugs constantly reported.

I have found a work-around that works on my Macbook (haven't tested mobile Safari). With the same framerate as the video I update video.style.willChange alternating between "" and "transform". It's possibly a performance killer, so make sure you stop this with an intersection observer etc.

Same issue...tried all of the suggested workarounds and nothing working. For me, this seems to only be an issue with Safari and Chrome running on iOS 15

No solution till yet, I'm also facing the same issue.

I am developing a webpage and simple video tag makes the pages so laggy on ios browser (chrome/safari)...

Same issue.

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.