First frame of the background video doesn't show on Android

Question

I have the following code:

.background-video {
  position: fixed;
  z-index: -10;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-background-size: cover;
  -moz-background-size:cover;
  background: url(video.jpg) no-repeat center center fixed;
  background-size: cover;
}

@media (max-width: 767px) {
  *::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none
  }
}

<video autoplay loop class="fillWidth background-video" poster="video.jpg">
  <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
  <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
  <source src="video.ogg" type='video/ogg; codecs="theora, vorbis"'/>
</video>

To explain what happens:

• On iOS Safari, I hide the video play button and it shows the first frame of the video.
• On desktop video plays in an infinite loop.
• When I switch to Android (Oppo R7s ColorOS 5.1.1) instead of the first frame browser shows black background.
• Although on Nexus 5X Android 6.0.1 mobile Chrome browser everything works fine and I can see the background image.

From what I've found from the internet the reason for such behaviour could be disabled Javascript in the mobile browser, but enabling the Javascript functionality didn't help.

If somebody has experience with developing for OPPO phones, please tell how to show background image instead of black background on this phone.

UPDATE: Even though the bounty has been expired the question still remains open.

Answer 1

I'm suspicious of this rule:

-webkit-appearance: none;

I would back out all CSS and add it back one rule at a time to find the offending individual rule if you have not already. Ultimately, you may have to compromise in one view, but in this way you should be able to minimize the damage.