HTML Video element, not working after iosSafari15 update

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

Post not yet marked as solved Up vote post of BartyP Down vote post of BartyP
32k views
Posted by
BartyP
Reply

  • Same issue here. Any news?

    —
    danilocjr

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

    —
    jfjf

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

    —
    bronan99

Replies

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

Posted by
possamai
Up vote reply of possamai Down vote reply of possamai
Add a Comment

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>
Posted by
Tecia
Post not yet marked as solved Up vote reply of Tecia Down vote reply of Tecia

  • Thanks! This got me the solution that I needed.

    —
    jwharton

  • Yes! This was the solution. Thanks!

    —
    pms-NL

  • Many thanks , i was looking for for a long time. Andre (Grenoble-France)

    —
    Andre1952France
Add a Comment

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

Posted by
Luna2442
Up vote reply of Luna2442 Down vote reply of Luna2442

  • I have been facing the same issue, <video  controls  playsinline> <!-- Apple device recorded link --> <source  size="1080" src="https://www.dev-api.tenrol.com/s3/uploads/video_cv/21_candidate.mp4" type="video/mp4" /> <!-- Android device recorded link --> <source  size="1080" src="https://www.dev-api.tenrol.com/s3/uploads/video_cv/18_candidate.mp4"type="video/mp4"/></video>

    1.Apple recorded link working fine 2.Android recorded issue in saffari and iphone

    Need FIX ASAP

    —
    Sabahath0507
Add a Comment

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>
Posted by
avinash403
Up vote reply of avinash403 Down vote reply of avinash403
Add a Comment

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.

Posted by
dcnicholls
Up vote reply of dcnicholls Down vote reply of dcnicholls
Add a Comment

add poster attribute and add any random poster

Posted by
abhi123
Up vote reply of abhi123 Down vote reply of abhi123
Add a Comment