Video won't load in ionic angular

Can anyone take a look at my video code for me?

I am trying to load a sermon video on one of my pages.

Using “ionic serve” and visiting the page, the video won’t load. If i switch the page and then go back, the video loads fine and right away.

When I deploy it to firebase hosting, the video doesn’t load at all on the website. It just infinite spins.

Anyone have an ideas or suggestions?

.html

  <div class="sermon-background">
      <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
       <source [src]="sermon?.sermonVideo" type="video/mp4" />
      </video>
   </div>

.scss

.sermon-background {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(1vw + 1vh + 60vmin);
  width: 100%;
  background: center / cover url(/assets/img/pastorBackground.jpg) no-repeat;
}


.sermon-background video {
  object-fit: none;
  max-width: 95%;
  height: calc(1vw + 1vh + 50vmin);
}

Thanks for taking a look by the way :slight_smile:
Feel free to comment about anything :slight_smile:

oh and no errors in the developer tools or terminal by the way :stuck_out_tongue: