HTML Video element, not working after iosSafari15 update

Safari & Web General
BartyP OP
Created Sep ’21
Replies 26
Boosts 3
Views 35k
Participants 36

hi,

after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly.

all i can see is white blank background instead of background video. it looks like video cannot be loaded or played.

html:

<video playsinline
      autoplay
      muted
      loop
      class="uvodna__bg-video"
>
    <source src="/wp-content/themes/imtsmile2021/video/bg-video.mp4" type="video/mp4" />
</video>

can you recommend me some tips to fix that issue? thank you

Replies  26
Boosts  3
Views  35k
Participants  36
danilocjr OP
Sep ’21

Same issue here. Any news?

0
smorgg OP
Sep ’21

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.

3
enekodev OP
Sep ’21

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.

0
jfjf OP
Sep ’21

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.

0
jfjf OP
Sep ’21

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).

0
leonleonleon OP
Oct ’21

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...

3
lwarddev OP
Oct ’21

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.

0
Ianos OP
Oct ’21

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.

1
bronan99 OP
Nov ’21

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

0
Kosso OP
Nov ’21

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.

0
ILTP OP
Nov ’21

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.

0
_r_m OP
Nov ’21

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

0
lastnamearya OP
Feb ’22

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

0
JaysonF OP
Mar ’22

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

0
youngbloodk OP
Mar ’22

Same issue.

0
HTML Video element, not working after iosSafari15 update
First post date Last post date
 
 
Q