-4

(Using WordPress 4.7.3)

I have a video on my header background and it runs normally in the browser on desktop but when I open the browser on a cell phone, the video disappears. I checked the media queries in order to know if it is the problem, but apparently not.

Site URL: http://ratts.herokuapp.com/

Any idea what it is?

Daniel Herr
  • 19,083
  • 6
  • 44
  • 61
Thiago Anderson
  • 587
  • 1
  • 6
  • 13
  • 3
    Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](https://meta.stackexchange.com/questions/125997/) Thanks! – j08691 May 15 '17 at 18:37
  • Not sure what you're using to view this besides Chrome Developer Tools Mobile Spoofer but it looks to be working fine when i test it in a desktop or mobile device. edit: Correction, I just tested it with an iPhone and it does not work. Android looks ok though. – trav May 15 '17 at 18:41

1 Answers1

2

If you are talking about the video on the background, it won't work.

The only way to autoplay videos on mobile devices is to ditch the html video tag.

If you don't need audio:

  • Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
  • Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
  • Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.

Here's a similar question: HTML5 video background on iPad/iphone

Community
  • 1
  • 1
Andre Aquiles
  • 394
  • 1
  • 17