Fullscreen video div does not show on mobile

I am having an issue with fullscreen videos on mobile devices. The code below works great on desktop and even in Chrome tools mobile mode. For some reason when you actually load it on a mobile device it's a white screen. See this pen.

<div id='holderDiv'>
  <video id="video2" loop muted class='background-video'>
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4#t=o.1" type="video/mp4" />
  </video>
</div>



#holderDiv {
  position: fixed;
  text-align: center;
  top: 0;
  left:0;
  width:100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0);
  z-index: 100;  
  pointer-events: none;
  user-select: none;  
}
.background-video{
  top:0px;
  left:0px;
  height: 100vh;
  position: absolute;
  width:100vw;
  object-fit: cover;
  z-index: 1500;  
}

Solution

Try this. I think it has something to do with autoplay in mobile phones. If I remember correctly regular autoplay doesn't work well in mobiles.

<div id='holderDiv'>
 <video id="video2" 
   autoplay
   muted 
   playsinline
   preload
   loop
   onloadedmetadata="this.muted = true" 
   oncanplay="playVideo(this)" 
   onended="playVideo(this)"
   class='background-video'>

  <source src="https://download.samplelib.com/mp4/sample-5s.mp4#t=o.1" type="video/mp4" />

 </video>
</div>