Banner video not playing in Safari

I use Section pro with a video background, but the video is not playing in Safari. The video is hosted on the server. Via the direct link to the video I get a crossed out play button. In Firefox is playing fine.
In the Section Pro stack I checked the allow play on touch devices, but is also doesn’t play on iPad or iPhone. The video is in mp4 format.
Screenshot of the settings are attached.
Link to the page is: Test anchor url
Direct link to the video: https://www.3xfilm.nl/resources/video/1920-860-waar-vind-je-ze-nog.mp4

Any help appreciated!

Your direct link to the video does not play in Safari. There must be some sort of encoding problem that Safari refuses to play.

It downloads ok from the link.
Works with other stacks

It works with SectionsPro as well if I download it.

@RicoRoyal This seems like a waste of time (as your direct link does not play in Safari) but here is a project file with SectionsPro at default settings and your video downloaded to my server.

https://apex.d.pr/zJZqZk

and here it is published which works in Safari

https://test.bigwhiteduck.com/test-vid/

It doesn’t play from @RicoRoyal 's link in “other stacks” though - at least not the three I’ve just tried. I think we need to focus on the link.

All the stacks I’ve tried (plus Safari directly) will play that same file from my server but not from the original post link.

https://images.bigwhiteduck.com/1920-860-waar-vind-je-ze-nog.mp4

1 Like

Wow, thanks, this isolates the problem perfectly. I will call my hosting company if they have any clue as to what can block the playback of the video on my server.
I also read something about cloudflare buffering, interfering with video playback on apple devices. But I didn’t see a solution for that.

I added your link as a source of the background video and now everything works as expected. So it is definitely as you said. It is something blocking the playback of the video on my hosting. @tav

@RicoRoyal I’m glad we’ve got to the bottom of it and I hope you can get it resolved with your host.

I will have to turn back on the cross origin restrictions on my site after the weekend though so please try and find somewhere public domain that you can host your video in the mean time.

Yes of course! I used it purely for testing purposes. Uploaded the video to another domain I own and now the video plays fine on all platforms. Thank you for all your help, highly appreciated! So I will remove the testpage after the weekend also.

If I can resolve it with my host I can use my original link, if not playing the video’s from another domain is a nice workaround.

1 Like

Is it possible to link to a vimeo video as a background video? I tried it also as a work around but couldn’t get it to play. Video was set to public and publish anywhere. Link to the video is: https://vimeo.com/616947543

I can’t find a way to play a vimeo video but you can put a mp4 version on a server and I used eclipse to play it…
Here is my sample: Untitled Page | My Website

Try adding the background parameter to the end of the URL as described here in Vimeo’s documentation

https://vimeo.com/616947543?background=1

That is how I currently do it. I was wondering if it would be possible with a video hosted on a video platform.

Thank you, we do have Vimeo plus, but sadly this doesn’t do the trick for me. I found a couple of websites that have autoplay background video’s that work in Safari and are hosted on Vimeo. So it should be possible. For example: https://www.remistrikkers.com
In the there is also a script with a Vimeo API. Maybe the plugin somehow uses this script? Also this is a Wordpress website. Different platform, different tricks :slight_smile: In the meanwhile it works on my website now on https://www.3xfilm.nl/ with the video being hosted on another domain I own.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.