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
Feel free to comment about anything
oh and no errors in the developer tools or terminal by the way