After extensive searching, I have been unable to find a solution to my issue. I used an html5 video element as a background with success on both web and mobile platforms, until recently. I have tried adding all necessary attributes for compatibility and I believe the CSS is correct, but I will provide them here for reference.
HTML
<video playsinline muted autoplay loop poster="/media/images/still.png">
<source src="/media/videos/backgrounds/strawberry.mp4" type="video/mp4">
<source src="/media/videos/backgrounds/strawberry.webm" type="video/webm">
<source src="/media/videos/backgrounds/strawberry.ogv" type="video/ogg">
</video>
CSS
video {
display: block;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 60vh;
opacity: 0.9;
z-index: -100;
}
The only change I made recently was updating the video formats. It used to be .m4v, but I converted them to the current format for better streaming capabilities. Feel free to visit the website at on your mobile device to verify the issue. Any assistance would be greatly appreciated!