Background video not playing on android chrome & safari

Hi pro’s,

I made this small site for a local youth movement (chiro) which basically is about seeking sponsors for their renovation project :

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.

Nice week-end,
Erwin Geeraerts

The URL shows a 502 - Bad Gateway error.

Same for me.

Without seeing the code, I can only guess.

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.

1 Like

Hi Mittineague,

Sorry about this.

The provider has killed the cherrypy process to avoid disturbing the neighbours.
I restarted it.

Best regards and many thanks for looking into this !

Hi ronpat,

Sorry about this.

The provider has killed the cherrypy process to avoid disturbing the neighbours.
I restarted it.

Best regards and many thanks for looking into this !

1 Like

I’m sorry to be slow this evening.

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.

Indeed, it is supposed to cover the entire screen.
I restored it to how I originally thought it should be.

Your example works nicely in Chrome (although it does matter which video format it picks) :slight_smile:
Oddly, when run on my copy, the vid seems to need a z-index of -1.

Have your read this article?

This is beyond my knowledge. I would like to ask that someone else pitch in if @hypy has more questions. (@PaulOB ?)

1 Like

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).

The first thing to do is to check the server is serving the right mime-types for those videos.

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.

<div class="video-wrap">
  <video id="bgvid" loop autoplay  preload="auto" poster="images/E_HP_002.jpg">
    <source src="video/E_HP_002-HD_720p.mp4" type="video/mp4">
    <source src="video/E_HP_720p.webm" type="video/webm">
    <source src="video/El_HP_002-HD_720p.ogv" type="video/ogg">

Thanks for taking a shot at it, I really appreciate this.

1 Like

Thanks for the hints. I adapted the site already but will dig deeper into the articles as it contains lots of good advice.
I really appreciate this !

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