1

Here is the link to the bigcommerce store I'm working on. It shows background video on all the devices except IOS devices on any browser. https://axict.mybigcommerce.com/ Looking for help in this weird issue. Thanks in advance.

Here is the video element code,

<video id="bannerVideo" class="bgVideovideo" autoplay loop muted playsinline>
    <source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.webm" 
          type='video/webm;codecs="vp8, vorbis"' />
    <source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  Your browser does not support the video tag.
</video>
ElusiveCoder
  • 1,593
  • 1
  • 8
  • 23

2 Answers2

2

From a quick check this actually does not work on Safari on MacOS either and it does on Chrome on the same Mac.

Looking at the network traffic you can see the server responds with a '200' to the byte range request from the browser for the video, which Safari does not handle well, although Chrome does:

enter image description here

The most common root cause of this issue appears to be servers that are not configured to handle range requests in what Safari consider the correct manner. It expects to see a '206' response when it sends a request with a byte range.

There is more discussion and examples in the answer here: https://stackoverflow.com/a/32998689/334402

Mick
  • 24,231
  • 1
  • 54
  • 120
  • Chrome on iOS has been traditionally quite different from desktop Chrome - it uses WebKit from Safari so you'll often find the behaviour similar to Safari. I'm not sure if this has changed in the last iOS 14 where there are some browser changes. Either, way - I think your root problem is likely as discussed above. – Mick Sep 29 '20 at 10:50
1

Looks like you've uploaded the video to WebDAV - just like Mick's answer, the file hosting server that BigCommerce WebDAV uses is not configured to send the correct request type that IOS/Safari is looking for when loading a <video> element's source.

When I ran into this, I had to upload the video to AWS S3 Storage. You should be able to get 5GB permanently on the free tier.

Mikhail
  • 870
  • 1
  • 10
  • 23