[HTML] video in apertura sito. su pc ok, su smartphone KO

[theseo]

ciao, seguendo varie guide, ho messo questo codice su un sito:

<header>
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="img/drone2.mp4" type="video/mp4">
    <source src="img/drone2.webm" type="video/webm">
    <source src="img/drone2.ogv" type="video/ogv">
  </video>
</header>

supportato da questo CSS:

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


@media (pointer: coarse) and (hover: none) {
  header {
    background: url('http://www.xxxxxx.ixx img/drone.png') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

il tutto per visualizzare un video a larghezza 100% nella parte iniziale della pagina web, ebbene sui browser classici sui pc si vede tutto ok, sui cell e tablet (sia iphone che android) il video non parte e si visualizza l'immagine sostitutiva...
Come posso fare x fare visualizzare il video anche sugli smartphone?