HTML5 Video Background not working on Safari - html

This is the website that I'm building: http://franciscouto.pt/woodkid/
It works perfectly in Chrome and Firefox but not on Safari. The website doesn't even load. It always give the error "A problem repeatedly occurred with "http://franciscouto.pt/woodkid/" Reload webpage.
Thanks in advance

Related

Brave Browser / Bug with scrolling - Return to top of the page

there is a bug regarding scrolling when opening https://www.streampicker.de/ with the Brave Browser. After scrolling down a bit, the website jumps back to the top.
Video to show it in action: https://www.dropbox.com/s/37suikq9awxix7c/StreamPicker%20-%20Brave%20Browser%20-%20Scrolling.mov?dl=0
It works perfectly with all other browsers including Chrome. Brave is on the latest version with no other external extensions installed.
Any ideas what could cause that problem and how to fix it - in the browser or in the code of the website itself?
Thanks!

HTML5 video tag fails to display high resolution videos

I have a simple webpage with a <video> tag. I tried assigning the src attribute of the video tag with URLs of two different videos, both about 2 and a half seconds long:
The first video has a frame resolution of 3840x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/2/
The second video has a frame resolution of 4096x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/3/
I'm encountering a problem with the second video when loading the webpage from Google Chrome on my mobile device (Galaxy S10). The first JSFiddle works perfectly fine on all devices. The second JSFiddle seems to work fine on desktop browsers, but simply displays a blank white screen when I open it on my mobile device (on Google Chrome for example).
I've tested this functionality using many other video files, and it is clear that the frame resolution is the decisive factor here: the problem occurred with every single video with a resolution of 4096x2160, and only with these videos.
I tried using this website: https://clideo.com/crop-video, to test whether or not it is even possible to display high resolution videos on mobile. I uploaded the second video (the one that was causing a white screen), and it was successfully displayed using a video tag on that website - both on desktop and on mobile!
What am I doing wrong? Any help to resolve this would be appreciated.
Once again just to clarify:
The issue does not happen on desktop browsers at all.
The issue does not happen on FireFox on my Galaxy S10.
The issue happens on every other browser I tried on my Galaxy S10, as well as in Safari on iPhone.

Webpage loses functionality on Safari but is fine on Chrome

Can someone help me understand why certain things aren't working on safari but do on chrome?
These are apparent on both mobile and desktop.
So here is the website I'm currently working on: http://stage.coefficientlabs.com.s3.amazonaws.com/index.html
Problems:
1. The hero video plays smoothly on Chrome but not on Safari.
2. (main issue) Once the "Get Started" button is clicked, a modal appears. All the styling and content seemingly hidden(?) on Safari but not on Chrome.
Any idea what is going on here?
Thank you!
Turns out the issue was "overflow: hidden". I think is a known difference for Safari in general.

Safari and mobile Safari randomly missing images BUG?

Im trying to figure out why we randomly misses images when looking on mobile safari and desktop safari. Google Chrome is always working for me.
Is this a bug or is there anything i can change to make it render all the images. It is totaly random and never had this problem before.
http://www.fantasticfrank.se/stockholm/till-salu

How to replicate a website display glitch on the iphone in the desktop browser?

I have a problem with a responsive website and how it is displaying on the iphone. But I am not able to replicate the visual glitch by using Chrome or Safari and shrinking the window width or changing the user agent in the Chrome console to the iPhone I can only replicate the visual glitch when testing using an actual iPhone.
This makes diagnosing the problem hard as I cannot access the web developer console to inspect the element to see what is going on.
Are there any other options?