Videos not displaying correctly on iOS Safari/Chrome

Having issues with videos displaying properly on https://optimistic-montalcini-0b4454.netlify.app/ mobile phone iOS safari or chrome. The videos do display correctly when running locally (so I have sussed our that this is not strictly a browser bug with the tag itself). This bug isn’t affecting the Android mobile devices or dekstop browsers I have tested so far. Videos are hosted on Netlify Large Media – when navigating to the URL directly on iOS Safari or Chrome, the video will play.

Site: https://optimistic-montalcini-0b4454.netlify.app/

Background video tags are formatted as such:

<video autoplay muted playsinline loop preload="auto">
  <source src="/static/img/landing-bg.mp4" type="video/mp4">
  <source src="undefined" onerror="fallback(parentNode)" type="video/webm">
  <img src="undefined" class="relative object-cover w-full h-full lazyload" data-src="undefined">
</video>

Post video tags are formatted as so:

<video controls preload="auto">
  <source src="/static/img/jlo-beauty-WebSpot_D_SkincareReveal_30_15_1x1_112020Final.mp4" type="video/mp4">
</video>

Build log: Netlify Build Log · GitHub

Note, even Chrome on iOS uses the Safari rendering engine so Chrome on iPhones is not the same Chrome as found elsewhere.

My best guess is that when loaded using the <video> tag in the example above, Safari attempts to preload a portion of the video using the range: header. Unfortunately, it is a known issue that Large Media doesn’t support this header. There is a in-depth topic with a very clever workaround using service workers here:

There is an open feature request for this header to be supported but I’m not aware of it being planned anytime soon (and it is possible this support will never be implemented). For now, though, it simply doesn’t work.

If there are other questions about this, please let us know.

I’ll give the service worker method a try, thanks very much!

Hi there, I saw on your website you figured out how to make the video backgrounds work on safari mobile. Was just wondering how you were able to come to the solution. Im still having a problem with getting my background video to load on IOS