MP4 Videos don't work in Safari but do work in Chrome and Firefox

[arminunruh]

hey!

https://test2.laytheme.com/video-element-test/

look, here this video works on safari (when u scroll down).
but on your website, the videos dont work on safari.

like for example, the first one here:
https://www.mueller-brunke.com/category/fashion/

can u make sure u have the latest lay theme version installed?
can u try just as a test, to use this video and see if it works on safari:
https://test2.laytheme.com/wp-content/uploads/2023/12/intro_schrauben.mp4

[Dani_MB]

Hi Armin, sorry for the late reply. The video with the screws works on my safari. This is not a Safari problem, as my website videos also don't work on a number of other peoples Safari.

[Dani_MB]

The AI Bot in lay them suggested these option:
• Activate Video for Thumbnails
• Disable Video for Thumbnails on Touch Devices
• Enable Video Lazyloading for Safari

Non of it worked

[emgeoffice]

Sorry to ask, but is it a problem with the autoplay that is activated in your video? I also wonder why autoplay is there as a CSS class. Is that a Lay thing?

If you open the video via link it does not work on Safari (macOS) while it should at least here if I am correct. It almost seems like the video is not available while all the images are listed in "sources".

https://www.mueller-brunke.com/wp-content/uploads/2018/11/Vignette1.mp4

[arminunruh]

Hello! @emgeoffice has a point.

If i open one of your videos in safari, just by its URL, it doesn't work:

https://www.mueller-brunke.com/wp-content/uploads/2018/11/AnotherFriday6.mp4

This means there is likely an issue with the video itself.
You may want to use this free app:
https://handbrake.fr/

And convert your video to a H.264 .mp4 video and then try that exported/converted video.

[arminunruh]

ps: the ai chatbot is good at finding the places of different settings, but its not really smart enough to do much more than that :O

[Dani_MB]

Hi Armin, The videos don't work if i open Laytheme in Safari . If i open Laytheme in Chrome or Firefox they work, just like they work on the website. If i pull one of the videos into the safari browser they also work there. Chat GPT says this:

[Dani_MB]

[Dani_MB]

The Video is muted. How do i enable Plays Inline? Lazyloading is disabled where do i Disable Video for Thumbnails?

[arminunruh]

hey playsinline is already enabled by default.

the problem is not lay theme. the issue is the video file itself.
it doesn't play back on safari, not matter if you use lay theme or not.
what you need to do is:

"This means there is likely an issue with the video itself.
You may want to use this free app:
https://handbrake.fr/

And convert your video to a H.264 .mp4 video and then try that exported/converted video."

if you did that, yes you can try to turn off lazyloading for videos by turning off both these checkboxes in lay options:

[Dani_MB]

Hi, I had to get an expert in to look where the problem was. Because it was not the video file, i could pull all videos into Safari and they worked. The videos just did not work in Laytheme when opened with Safari.
Here is the reply of the expert who sorted the problem. His reply is in German. So just translate for those who cannot read it:
Letztendlich lag es daran, dass dieser byterange header nicht geschickt wurde.
Cloudflare hat den nicht wietergeleitet von HostEurope.
Die Lösung war jetzt extra für die videos eine neue subdomain zu machen (
https://videos.mueller-brunke.com/wp-content/uploads/2018/11/Video1.1.mp4).
Und dafür die ganzen Proxy's von Cloudflare abzuschalten.
In wordpress musste dann noch eine Weiterleitung eingerichtet werden, dass die Aufrufe der Videos dann dorthin geleitet werden.

[arminunruh]

oh interesting, so it was a cloudflare related issue mmh