Первый кадр фонового видео не отображается на Android

У меня есть следующий код:

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

Ответ 1

Я подозреваю это правило:

-webkit-appearance: none;

Я бы отбросил все CSS и добавил его обратно по одному правилу за раз, чтобы найти оскорбительное индивидуальное правило, если вы еще этого не сделали. В конечном счете, вам, возможно, придется идти на компромисс в одном представлении, но таким образом вы должны иметь возможность минимизировать ущерб.