I am having some strange issues with Safari 15.0.
I have put a jsfiddle test up here: https://jsfiddle.net/batdan420/3jrvgc2p/3/
You should hopefully be able to replicate the issue by visiting the url in Safari 15.0 and also see that it is not a problem on other modern browsers.
The issue seems to be to do with the video element starting out as position fixed.
This has worked on past versions of Safari (and other browsers) for many years but when I updated Safari, I found that the sites I am using the code on no longer displays the video when the page loads...
The above example should make it easier to diagnose/confirm the issue but if you want to see the code without going to the test here is the line of code that is causing the issue:
<video style="left: 0;top: 0;height:100%;position:fixed;width: 100%;z-index: -20;" autoplay loop muted playsinline>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>
I was able to fix the issue by REMOVING the position property from the css (that is currently inline for testing purposes) and THEN using javascript/jquery to set the css of the video element to position fixed AFTER the document is ready but this is not the most ideal solution.
The issue does NOT seem to happen on current versions of Chrome (94.0) or Firefox (93.0).
Perhaps there is something wrong with my code? or is this an issue with Safari 15.0?
I just had the same issue with Safari desktop. The solution was just to put the video tag inside a wrapper which has the fixed position as Safari seems to be unable to handle it directly on a video tag.
This doesn't work in Safari:
<video style="position: fixed" src="..."></video>
This works:
<div style="position: fixed">
<video src="..."></video>
</div>