Videos not displaying correctly on iOS Safari/Chrome

[kylepfeeley]

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

[luke]

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:

Add support for "Range" header for Large Media files

This allows fetching only a small part of the file. Sometimes files are big and I don’t need to download the whole file just to get some small part of it. With Range header, you can specify the range of bytes you want to download. See for request header: Range - HTTP | MDN See for response header: Content-Range - HTTP | MDN

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.

[kylepfeeley]

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

[kohyo]

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

[kylepfeeley]

Hey sorry kohyo, I forgot to reply. I was never able to get videos to work in Safari using Netlify Large Media. The service worker suggestion provided by support did not work for me. I used Github Large File Service with Eleventy Images instead and that has been working fine. I have also had success with doing background videos using embeds from YouTube or Vimeo as well.