The idea was to play immediately upon loading the site a background video, behind a form to get email addresses of the visitors.
This works on :
Windows PC : firefox, chrome, edge.
Android : firefox.
Mac (a friend of mine tested this) : chrome
But non on :
Mac : safari.
iphone/ipad : safari
Android : chrome.
I spent hours trying to convert & reconvert the original video in god knows how many ways.
But … I’m starting to think that the problem is in my html/css.
It would be a relief if some real web pro (not a wannabee like me) could pinpoint the exact problem here.
I suppose any html/css is visible using FF or Chrome’s built in dev tools.
But off course I’m available to give any further info if needed.
In return : I’m willing to help you out with database or python related questions.
Different browsers support different video formats, AFAIK they “skip over” the ones they don’t support until they get to one they do support. If the one they need isn’t there, no video.
The content area with the form is relatively positioned 30% from the top of the viewport.
The video player is absolutely positioned partly offscreen to the left of the viewport.
Those methods of positioning objects are not recommended as used.
Is the background video supposed to cover the full screen or is it supposed to cover an area the size of the form? A screen shot showing how you expect it to look would be helpful.
Your example works nicely in Chrome (although it does matter which video format it picks)
Oddly, when run on my copy, the vid seems to need a z-index of -1.
I looked at the code and it worked in Chrome but didn’t work for me in Firefox so I copied the code locally (but hot linked to the videos) removed the webm file and it worked ok in both browsers. However Safari on the mac still didn’t work.
I then copied the videos locally and it works in Chrome and Safari but still not Firefox unless I remove the webm file (or move it after the ogg file in the source) which seems to suggest that the webm file is not working properly.
The safari issue is likely a mime type issue as the code works locally in my Safari and on the iphone emulator (although it won’t autoplay on the iphone and the content is in the way of the play button).
I recently used the technique in the article above for a client and was provided with webm, ogv and mp4 videos and it worked in all modern browsers straight away using this code.
